通过element.style访问或者设置行内样式
div {
width: 100px;
height: 100px;
background-color: rgb(255, 255, 0);
}
// 下面是div的结构
<div>
我是div里面的内容哦
</div>
div只是通过style标签设置了样式,背景色初始时是黄色,
行内样式基本都可以这样设置或者获取,但是有个例外,就是float属性,我测试的结果是style.float和style.cssFloat都可以:
CSSStyleDeclaration相关API
不常用,
setProperty(), getPropertyValue(), item(), removeProperty()
使用getComputedStyle获取计算后的样式
很多时候我们更加在意的并不是元素的行内样式,而是这元素真正展示在页面上的时候的样式,这些有的是继承的,有的是默认的,就像在谷歌浏览器调试窗口看到的:
window.getComputedStyle()方法可以获取任何CSS属性,如上图所示,可以获取到元素的真是的样式。
三种使用方法
使用getComputedStyle获取伪元素(Pseudo-Element)的样式
element.style这个方法是获取不到伪类元素的样式的,毕竟element也没法被赋值成一个伪类元素。但是getComputedStyle可以,他的语法是这样的:
window.getComputedStyle(element [, pseudoElt]);
demo0
我们给div加上一个伪类:
div::before{
content: '我是before';
display:block;
background-color: red;
}
未完,待续
参考文献:
https://css-tricks.com/an-introduction-and-guide-to-the-css-object-model-cssom/