通过javascript使用复杂的css属性

Using complex css properties via javascript

本文关键字：css 属性 复杂 javascript 通过      更新时间：2023-09-26

如何在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，所以这些属性是在组件渲染到DOM之前定义的。这就是为什么我不能使用document.getElementById()

如果你必须通过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);
相关文章：