浏览器中的元素到底支持多少种CSS样式

发布时间：2020-09-06 11:10:40 作者：李游LEO
来源：网络阅读：190

样式这个东西我想大家都不陌生，没有样式整个页面一下也就失去的光彩，所以样式（style）的重要性就不言而喻了。

那么一个元素到底支持多少个样式呢？可能有人会说这事得 W3C 说的算。

其实，这事 W3C 说的也不算，为什么呢？因为 W3C 就算上面有，但是浏览器中如果没有的话，那一切都没有意义，因为浏览器不支持，W3C 把这个样式说的再好再棒也没有用。

好，那既然检测元素样式的唯一标准是浏览器的话，那么问题来了。对于一个最简单的 div 元素浏览器到底支持它多少种样式呢？

当然这里我们要说到一个比较常用获取元素样式的方法：getComputedStyle

咱们先简单说说 getComputedStyle 的用法，看名字就知道它跟样式有关，如果按照英文翻译的话就是：

get 获取
Computed 计算
Style 样式

也就是说，这个方法可以帮助咱们获取一个元素在实际最后需要计算的样式数值。

最简单的使用方法就是，首先是有两个参数，元素和伪类。第二个参数不是必须的，当不查询伪类元素的时候可以忽略或者传入 null。

使用示例：

getComputedStyle(获取的元素,伪类名字)[样式名字]

例如：

<style>
*{margin:0;padding:0}
#myDiv{width:200px;height:300px;background:red;}
#myDiv:after{
width:50px;height:30px;content: '';background: yellow;
}
</style>
<body>
<div id='myDiv'>Leo</div>
<body>

<script>
console.log(getComputedStyle(myDiv,null)['width'])//'200px'
console.log(getComputedStyle(myDiv,':after')['width'])//'50px'
console.log(myDiv.style.width)//''
</script>

我们能看到他可以轻易获取元素样式和元素伪类的样式值，并且它和element.style的区别。

element.style 读取的只是元素的“内联样式”，即写在元素的 style 属性上的样式；而 getComputedStyle 读取的样式是最终样式，包括了“内联样式”、“嵌入样式”和“外部样式”。

但是，element.style 既支持读也支持写，而 getComputedStyle 仅支持读并不支持写入。

当然有的同学看到这就会问，老师，那它和元素浏览器到底支持它多少种样式有什么关系呢？

答案是：有，而且是相当有。

细心的同学可能已经看出来了，它的使用方法是后面使用了一个中括号然后放入了样式就会返回出最后元素的计算的样式数值。有没有发现它和 JavaScript 中的一个数据类型的使用方法很像呢？

没错，就是 JSON。

你会发现 JSON 也是支持后面放入中括号然后放入字符串，如果有该属性就会返回该属性的value。也就是所谓的键值对(“key = value”)。所以也就是说如果不加上后面的中括号本身直接使用 getComputedStyle 会把这个对象返回出来，而这个大对象中包含了所有的样式，只不过我们平时用的时候只是在后面加上了 key 把 value 取到而已。

咱们以 Chrome 浏览器为例，当然各位同学可以尝试一下：

console.log(getComputedStyle(myDiv));//

你会发现好长好长的，而且没显示完的一个巨大的对象，大家也可以点开这个对象，这个对象中包含了这个元素可以使用的所有的 css 样式，当然你可会发现前 280（0-279）个是以数字为命名的 key，这些都不是，只有数字之后的才是我们可以使用的元素的 css 样式。

那好，既然我们已经已经有这个大对象了，那我们只需要写一个简单的循环抛去 key 是数字的就可以知道浏览器到底支持多少种 css 样式了。

var index = 1;
for(var i in getComputedStyle(myDiv)){
if(isNaN(Number(i))){
index++;
console.log(i)//可以看到所有的样式
}

};
console.log(index);//414

没错，谷歌浏览器对 div 元素的样式支持一共是414种，各位同学么猜对了么？

最后说一下关于 getComputedStyle 的兼容性问题，在 Chrome 和 Firefox 是支持该属性的，同时 IE 9、10、11 也是支持相同的特性的，IE 8并不支持这个特性。 IE 8 支持的是 element.currentStyle 这个属性，这个属性返回的值和 getComputedStyle 的返回基本一致，只是在 float 的支持上，IE 8 支持的是 styleFloat,这点需要注意。

欢迎点击进入李游Leo老师的前端课堂
点击进入本站最全全栈课程《李游Leo - Web前端,从零基础到全栈工程师》带你用最快的时间一步月薪上万

浏览器中的元素到底支持多少种CSS样式

相关阅读