前端试题-cssText?

Posted 2020-06-14

平常我们想更改页面上某个元素的样式时，我们一般会在js里这样写：

想更新obj的宽时，写上一行：

obj.style.width = “200px”；

想改它的定位类型时，再写一行：

obj.style.position = “absolute”;

又想改它的边框了，再加一行：

obj.style.border = “1px solid brown”;

……

改的样式多时，我们就要这样不停的写一行写一行……

 

如果我们在网上搜js批量修改样式，会发现有这样一个属性cssText。

它是一组样式属性及值的文本表示。

 

如果在js没有使用cssText前，即使在css样式里已经对obj进行了一些样式设置，但在控制台输出obj.style.cssText时却是空，只有在js使用过cssText对样式进行设置后，obj.style.cssText才能输出cssText设置的值。

 

就如我们把上面那一行行代码换成cssText写法，在js里是这样的：

obj.style.cssText = “width:200px; position:absolute; border:1px solid brown”;

此时我们再在控制台输出一下obj.style.cssText，就会出现我们设置的值，但同样这样值里仍然不会出现css样式里设置的值的。

有一点要注意，就是cssText对之前元素含有的样式会全部替换掉，因此我们用cssText时就应该这样用：

obj.style.cssText += “width:200px; position:absolute; border:1px solid brown”;

还有一个IE6/7/8会出现的问题，如果我们让控制台输出cssText的值会发现，IE6/7/8返回的属性名和值不仅是大写，而且最后一个属性名和值的后面的分号”;”被丢掉了。

这样使用cssText在拼接字符串时我们要在前面补上一个分号，才不会出各种各样的问题。因此完善一点的cssText写法是这样的：

obj.style.cssText += “; width:200px; position:absolute; border:1px solid brown”;

到这里cssText已经说完了。

 

不过还有一种类似批量修改属性的方法貌似也不错，同样达到同样的效果。

//使用JSON的方式

function setStyle(obj, json){
    for (var i in json){
        obj.style[i] = json[i];
    }
}

setStyle(obj,{width:‘200px‘, top:‘50px‘, left:‘100px‘, border:‘2px solid brown‘});

setStyle(obj,{height:‘50px‘});