（知识点）JS中获取元素的样式

时间：2022-05-07 13:37:50

首先我们已经知道了JavaScript如果获取一个元素的内部样式，你可以这样做：

<div id="box" style="width:100px;height:100px;background:red"></div>

<script>
    var oBox = document.getElementById('box');
    console.log(oBox.style.width);
    console.log(oBox.style.height);
    console.log(oBox.style.background);
</script>

在这种情况下，获取和设置靠style属性就可以了，因为element.style属性返回的是一组类数组的一组样式属性及对应的值。因此访问具体样式的时候可以采取两种方式即“ele.style.属性名称”和“ele.style['属性名称']”。

但是，要注意的是：对于css样式里的background-color，margin-top等以-相连的属性（在JavaScript中的命名规范中，-是不可用的）。对于这种情况，在使用style属性获取设置样式的时候名称要改为驼峰式，如ele.style.backgroundColor.

——

上述的方法只能用style属性获取到内联样式。

但是现在的文档基本上都遵循分离的思想，样式基本都是外部链接。所以三种方式设置样式都要考虑到：

在Dom标准里有一种全局的方法：getcomputedStyle(obj,null).paddingLeft;

但是事情还没有就这么结束：万恶的IE是不支持这种方法的，但是它提供了一种方法currentStyle,它与全局方法getComputedStyle还有所不同，它是作为Dom元素属性存在的，你可以这样使用obj.currentStyle.paddingLeft;

——

那么最终考虑到兼容性问题：我们可以让浏览器都可以获得元素的全局样式

function getDefaultStyle (obj,attribute) {
　　return obj.currentStyle ? obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj,false)[attribute]
}

getComputedStyle的用法是这样window.getComputedStyle（obj,pseudoElt）[attr]

其中pseudoElt表示：after和：before这样的伪类，如果不用的话，设置为null就可以了，

但是在老版本的火狐中，一般只需要一个参数，这里设置为false是为了兼容老版本的火狐。

最后：我们在来回顾一下给元素设置样式的几种方法：

1)外联式Linking(也叫作外部样式)

2)镶入式Embedding(也叫做内页样式)

3)内联式Lnline(也叫作行内样式)

优先级: 内联式>镶入式>外联式

所以，当同时存在且不同时:我们用这种方法得到的总是镶嵌在元素内部的style样式属性。

相关文章