Question

如何在javascript中使用以下css

#absoluteCenter {
left: 50% !important;
top: 50% !important;
-webkit-transform:translate(-50%,-50%)!important;
-moz-transform:translate(-50%,-50%)!important;
-ms-transform:translate(-50%,-50%)!important;
-o-transform:translate(-50%,-50%)!important;
transform:translate(-50%,-50%)!important;
}

我想以对象的形式使用它，所以我可以将一个样式对象传递给一个组件。所以它应该采用这种形式：

var styles = {
style: property
}

编辑：我正在使用ReactJS，因此在将Component呈现给DOM之前定义了这些属性。这就是为什么我不能使用document.getElementById（）

Answer 1

如果你必须通过JS来看看下面的代码:(虽然我建议创建一个样式类并添加到html）

var myStyle="webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%)!important,transform:translate(-50%,-50%); width:600px;" ;
    document.getElementById("absoluteCenter").setAttribute("style", myStyle);

Answer 2

您可以使用setAttribute方法，该方法可用于将style属性设置为任何元素的任何属性将其用于多个属性：

 document.getElementById("absoluteCenter").setAttribute("style",
        "prop1 : val1;
         prop2 : val2;
         ...;
         propn : valn;");

通过javascript使用复杂的css属性

2 个答案: