如何使用JavaScript更改CSS属性？

Question

我正在尝试使用javascript更改div的margin-top css元素，但它不起作用。 这是我的代码：

document.getElementById("sidescrollbtn").css({'margin-top':'70px'});

有任何想法吗？

小提琴： http : //jsfiddle.net/vinicius5581/2y63xnxa/5/

Answer 1

在香草JS中，只需设置.style.{camelCasedProperty} = 'value';

document.getElementById("sidescrollbtn").style.marginTop = '70px';

您也可以使用尝试使用的对象表示法在jQuery中进行操作：

$('#sidescrollbtn').css({ 'margin-top': '70px' });

Answer 2

您可以通过以下几种方法进行操作：

// Reference property name
document.getElementById("sidescrollbtn").style.marginTop = '70px';

要么

// Use setAttribute method
document.getElementById("sidescrollbtn").setAttribute("style", "margin-top: 70px");

要么

// Use jquery .css()
$('#sidescrollbtn').css({ 'margin-top': '70px' });

附加信息

• MDN上的Element.setAttribute（）
• jQuery文档上的css（）

Answer 3

使用HTML DOM

document.getElementById(id).style.property=new style

例：

<script>
document.getElementById("p2").style.color = "blue";
</script>

Answer 4

你可以给CSS使用

document.getElementById("p2").style.color = "blue";

Answer 5

在您创建的JSFiddle中，如果用下面的代码行替换有问题的代码行，则可以使用该代码。

document.getElementById("sidescrollbtn").style.marginTop = '70px';

您还可以通过使用jQuery来应用样式，如下所示

$('#sidescrollbtn').css({ 'margin-top': '70px' });