DOM脚本化CSS

LBJ
1,231 阅读3分钟

前言

我们知道DOM部分其实就是浏览器各大厂商提供的一些列方法和属性的集合，这一系列的属性和方法也被称为接口，这些接口可以让我们更加方便的操作HTML和XML，注意我没有说CSS哦

但我们经常会听到js操作css或者脚本化css的说法，那是怎么回事呢？今天我就来深入了解一下DOM如何脚本化CSS

原理

其实，DOM中提供的方法能操作HTML的所有内容，其中包括能操作元素的属性，而元素的属性中又恰好包含style属性，style属性表示的是该元素行间样式，而且行间样式的权重是1000。所以一般我们通过DOM操作元素的属性style就间接的改变了该元素的CSS样式。

DOM操作CSS样式其实质是通过DOM控制行间样式，从而达到改变样式的效果。这只能说间接的操作CSS，并非真实的直接操作CSS文件

具体实现

通过DOM元素的style读写CSS行间样式

格式：ele.style.prop

注：

  1. 可读可写行间样式，没有兼容性问题
  2. 碰到保留字属性，前面应添加css；例如：float-->cssFloat
  3. 复合属性必须拆解
  4. 组合单词变成小驼峰式
  5. 写入的值必须是字符串格式

用法比较简单，我们深入看看style吧

先随便来两个元素，并选中

<body>
  <div></div>
  <span></span>
  <script>
    var odiv = document.getElementsByTagName("div")[0]
    var ospan = document.getElementsByTagName("span")[0]
  </script>
</body>

我想看看dom元素的原型链

image.png

我们发现，dom元素的原型的原型都是HTMLElement。于是猜测，style就是定义在HTMLElement的原型链上，所以凡是DOM元素都有style属性。

通过hasOwnProperty进一步验证看看是否就在HTMLElment的原型上

image.png

得出结论：

DOM元素的style属性其实都是继承自HTMLElement.prototype。即里面可能这么写HTMLElement.prototype.style = xxx

明白style定义在哪里之后，再来看style里面是什么？

style属性

我们打印出来看看：

image.png

发现里面是一个css样式声明的对象：CSSStyleDeclaration

具体看看里面包括什么吧

image.png

真相大白了，原来里面包含就是CSS对应的属性名字，可以方便dom元素修改对应的某个样式

查询样式的其他方式

下面再来了解查询样式的方式：

window.getComputedStyle(ele,null)

  1. 通过计算样式获取的是当前这个元素所展示一切CSS显示值
  2. 计算样式只读
  3. 返回的计算样式的值都是绝对值（没有相对值，比如em,%）
  4. IE8及以下不兼容

ele.currentStyle

IE使用另外一直方式代替

  1. 也是只读
  2. 返回的计算样式的值不是经过转换的绝对值
  3. IE独有

最后我们封装一个所有浏览器都能用的方法：

function getStyle(ele, prop) {
  return window.getComputedStyle ? window.getComputedStyle(ele, null)[prop] : ele.currentStyle[prop];
}

END

以上就是关于脚本化CSS的相关内容

如有问题欢迎留言告知~

avatar
文章
阅读
粉丝