JavaScript之脚本化CSS_js高级程序脚本化css-优快云博客

本文链接：https://blog.youkuaiyun.com/c__dreamer/article/details/79365430

本文介绍JavaScript如何通过DOM操作实现CSS样式的动态修改，包括使用`dom.style.prop`进行行内样式的读写，并解决了不同浏览器之间的兼容性问题，还探讨了`window.getComputedStyle`和`elem.currentStyle`在获取计算样式方面的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

到了实战性的东西了，JavaScript虽然不能直接改变CSS，但可以通过其他方式间接改变CSS

dom.style.prop

可读写行间样式，没有兼容性问题，碰到float这样的保留字或者关键字属性前面应加css 例：float --> cssFloat。

复合单词必须拆解，组合单词变成小驼峰式写法。写入值必须是字符串。

var div = document.getElementsByTagName('div')[0];
div.style.width = "200px";
div.style.height = "200px";
div.style.backgroundColor = "red";
div.style.cssFloat = "left";

注：这个东西只能可读可写行间样式，不是行间的在引入css文件和内联样式是不可的，读取出来的是空值。

查询计算样式 --->window.getComputedStyle(elem,null)

这个东西返回的是一个CSS类数组，只读不可写的。它的返回值都是绝对值，没有相对单位。

它的第二个参数null可查询伪元素的样式表。IE8和IE8以下不兼容。

这个是查询到的元素显示的样式

var div = document.getElementsByTagName('div')[0];
console.logI(window.getComputedStyle(div,null).width);

查询伪元素样式

div ::after{
  width:100px;
  height:100px;
  backgroundColor:red;
}

<script>
 var div = document.getElementsByTagName('div')[0];
console.log(window.getComputedStyle(div,"after"));
</script>   //返回伪元素样式表 类数组

既然这个是IE8及一下不能用的，那肯定就有能用的。

elem.currentStyle

这个是ie特有的，同样也是只读的，不能写入，返回的是一个CSS类数组，返回的值不是经过转换的绝对值。

var div = document.getElementsByTagName('div')[0];
console.log(div.currentStyle.width);

当我们需要用到这种属性的时候同样我们需要做兼容性处理

function getStyle(elem,prop){
      if(window.getComputedStyle){
             return window.getComputedStyle(elem,null)[prop];
       }else{
           elem.currentStyle[prop];
       }
}

JavaScript语言我个人感觉是最有意思的了，我也是一个初学者，遇到问题，喜欢在博客上分享，也希望能帮到大家。

一个初学者，有什么不足或者纰漏的话，希望在下面评论出来，相互学习，共同进步。

--主页传送门--