CSS之cssText

时间:2021-02-03 15:55:43

更改元素样式

<div style="width:100px;height:100px;text-align:center;line-height:100px;">
        This is div</div>

一般更改的样式比较少的话,我们直接给style属性赋值

div.style.width = "200px";
div.style.height = "200px";
div.style.lineHeight = "200px";

但是一旦需要更改的样式很多的话,可以使用cssText来设置

div.style.cssText = "width:200px;height:200px;line-height:200px";

但是cssText会覆盖行内样式,不会覆盖<style>标签内的样式,不会覆盖外部样式,所以为了解决这个问题,采用样式叠加的方式。

div.style.cssText += "width:200px;height:200px;line-height:200px";

但是IE9以下的浏览器div.style.cssText会省略cssText中的最后一个分号

console.log(div.style.cssText);结果为:HEIGHT: 100px; WIDTH: 100px; TEXT-ALIGN: center; LINE-HEIGHT: 100px; BACKGROUND-COLOR: red

所以为了解决IE中的这个小问题

div.style.cssText += ";width:200px;height:200px;line-height:200px";