DOM样式操作

DOM样式

dom给我们提供了专门操作样式的API，css的样式非常的多，dom提供了一个统一的对象来操作样式。style这个对象在DOM里面就是用来包含样式的。

const odiv = document.getElementById("div")
//js获取到元素的样式
odiv.style

页面上每个标签都可以直接使用style这个属性来获取当前元素的样式。这个样式除了自己设置的内容外，还包含了浏览器的一些样式、我们也可以使用style来设置样式。

1. 单个单词可以直接用
2. 样式名字有连字符采用驼峰命名将连字符去掉。（连字符在js中可以表示删除）

通过style这个对象来获取到值都是内联样式的值，内部样式和外部样式的值都获取不了，设置值得时候也是动态设置给内联样式。并不会将样式放在内部或者外部。

如何获取到内部和外部样式？

内部样式和外部样式

内部样式

在js中默认是将每个内联样式封装style里面，但是内部和外部样式并没有直接封装到这个对象。而且需要通过文档的方式来获取到页面上定义的样式内容。

const arr = document.styleSheets //获取到页面上的样式表

内部 样式获取步骤：

1. document.styleSheets得到当前页面上的所有style标签，样式列表
2. 通过styleSheets这个对象获取cssRules，代表每一个选择器的样式集合
3. 通过cssRules调用style这个属性获取到当前某个选择器下面的所有样式元素。
4. 获取具体的样式属性名，来打印或者动态设置

外部样式

外部样式link导入到html中的样式表，要获取外部样式表，代码结构和内部样式表一样的

link导入样式的位置就决定了document.styleSheets获取的顺序。得到结果过后，就当成内部样式使用

 console.log(document.styleSheets);
console.log(document.styleSheets[0].cssRules[0].style.borderRadius);
document.styleSheets[0].cssRules[0].style.borderRadius = "50px";

对于内部样式表和外部样式表API在IE老版本下无法使用，有兼容问题。

console.log(arr[0].cssRules);

cssRules这个对象只能在标准的DOM浏览器里面获取选择器样式列表，在IE8下面无法使用，IE8专门提供了一个rules对象来操作样式。在IE8下面正确的写法为

console.log(arr[0].rules);

最终样式

最终样式的意义：

比如页面上有一个容器，这个容器我们需要进行显示和隐藏，判断当隐藏的时候通过js让他显示，显示的时候通过js让他隐藏。我就需要知道当前这个元素的最终状态是什么。

最终样式指的就是浏览器渲染过后的样式结果，最终作用在元素身上的结果。

document.defaultView.getComputedStyle(obox,null)
window.getComputedStyle()

IE低版本：

document.currentStyle

关于给样式在每个浏览器下面获取到的结果都不一致，及时你么有设置任何样式，他也会返回默认样式（祖宗十八代样式）。

常见的API操作

内联样式style对象提供和一些属性和方法可以对样式的操作：

1. 对象.属性 —可读可写 比较简单。但是important无法设置
2. 对象[xxx]—可读可写，对于特殊的css属性可以这样获取
3. item()函数是style这个对象提供的方法，可以通过下标的方式来获取。
4. style提供API方法来操作
   • getPropertyValue()获取到指定的样式，这是键是css属性的名字
   • removeProperty()
   • setPropertyValue()
5. cssText代表了当前自定义的样式列表，可读可写，你可以一次性替换所有的样式；

最后

以上就是俊秀太阳为你收集整理的DOM样式操作DOM样式操作的全部内容，希望文章能够帮你解决DOM样式操作DOM样式操作所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。