css中样式类型及属性值的获取

前言

以前真的没怎么重视，然后突然就遇到了与之相关的一个问题，最后百度解决了这个问题，因此简单记录一下

css样式类型

css样式主要分为三种类型：

1、内联样式（行内样式）

写在html标签里面，例如

<div style="height: 200px;"></div>

2、内部样式表

把css样式写在 <style></style> 标签质检，在现在基于vue 和 react开始时用到的最多

<style type="text/css">
div{
    color:red;
}
</style>

3、外部样式

将css单独定义到一个文件中，在大型项目中通过import 来进行引入

import 'base.scss'

优先级

内联样式 > 内部样式表 > 外部样式表
注：有!important的样式除外，其优先级最高

获取样式

dom.syle
这个应该是大家最熟悉，也最常用的了。我遇到的那个问题，就是与获取样式有关。

<div class="item" style="height:10px;"></div>

.item{
  width:100px;
}

比如上面这段代码，通过style.width 和 style.height 能获取到元素的宽高吗？结果是只能获取到高度，是获取不到宽度的。

dom.style 只能获取元素的内联样式，内部样式和外部样式使用style是获取不到的，但是能读能写

window.getComputedStyle(dom, ‘伪元素’)

参考：getComputedStyle

Window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有 CSS 属性的值

语法：

let style = window.getComputedStyle(element, [pseudoElt]);

• element 是要计算样式的dom对象
• pseudoElt，可选，指定一个要匹配的伪元素的字符串。对于普通元素省略（或null）