I'm trying to change the margin-top css element of a div using javascript but its not working. Here is my code:
document.getElementById("sidescrollbtn").css({'margin-top':'70px'});
Any ideas?
-
are you using jquery?Prabhu Murthy– Prabhu Murthy2014-09-19 11:22:24 +00:00Commented Sep 19, 2014 at 11:22
-
I am. I could be using $("sidescrollbtn") instead of document.getElementById("sidescrollbtn") I guess, but that wouldn't make a difference, right?Vinicius Santana– Vinicius Santana2014-09-19 11:24:34 +00:00Commented Sep 19, 2014 at 11:24
-
@ViniciusSantana it makes difference. Javascript has DOM object whereas jQuery has jQuery object. if you want to use jquery methods, then you must use jquery object.Mr_Green– Mr_Green2014-09-19 11:32:55 +00:00Commented Sep 19, 2014 at 11:32
Add a comment
|
5 Answers
In vanilla JS, just set .style.{camelCasedProperty} = 'value';
document.getElementById("sidescrollbtn").style.marginTop = '70px';
You can also do it with jQuery using the object notation you tried:
$('#sidescrollbtn').css({ 'margin-top': '70px' });
1 Comment
Joe
@wintermute just getting the answer in there first, I always explain :)
You can do it a several ways:
// Reference property name
document.getElementById("sidescrollbtn").style.marginTop = '70px';
OR
// Use setAttribute method
document.getElementById("sidescrollbtn").setAttribute("style", "margin-top: 70px");
OR
// Use jquery .css()
$('#sidescrollbtn').css({ 'margin-top': '70px' });
Additional Information
1 Comment
James Hill
@NishanthiGrashia, I do not consider making my
OR's bold a legitimate edit. If I wanted them bold, I would have made them bold.you can give css using
document.getElementById("p2").style.color = "blue";
Comments
Use HTML DOM
document.getElementById(id).style.property=new style
Example:
<script>
document.getElementById("p2").style.color = "blue";
</script>
Comments
In the JSFiddle you created, this will work if you replace the line of code having issue with the below line of code.
document.getElementById("sidescrollbtn").style.marginTop = '70px';
You can also apply style by using jQuery as below
$('#sidescrollbtn').css({ 'margin-top': '70px' });
