JS 操作 CSS3 的问题

复习第一次：2019-1-25

今天和朋友做项目，使用JS改变对象的样式，对于传统的宽高等可以改变，但是部分样式（opacity、z-index和其他CSS3的样式）直接使用对象点语法无法进行更改。查询资料后，对于这部分C3样式需要单独处理。

这是常见的写法，直接使用style.属性进行赋值，对于 CSS 传统属性没问题。

div.style.cssText = "width:300px;height:300px;border:1px solid black;position:relative;background-color:#ccc;";

对于部分C3属性需要注意：直接使用点语法不能很好的响应属性的更改。

当然，这里没有考虑opacity在ie早期浏览器的兼容问题。实际上工程上根据需要要写兼容问题。

// z-Index
div.style['zIndex'] = '3';
// 圆角矩形
div.style.borderTopLeftRadius = "20px";
div.style.borderBottomLeftRadius = "20px";