处理类似oDiv.style.left获取不到值的方法。

最新推荐文章于 2021-11-19 21:08:08 发布

原创最新推荐文章于 2021-11-19 21:08:08 发布 · 852 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #JavaScript #currentStyle #getComputedStyle

本文探讨了如何使用JavaScript获取HTML元素的实际样式，特别是当元素样式由内联、嵌入或外部样式表定义时。介绍了style、currentStyle 和 getComputedStyle 的区别，并提供了一种通用的方法来获取这些样式。

今天我一朋友写轮播图的时候突然问了一个问题，“怎么通过oDiv.style.left” 来得到左边距，当时我就反手就回了一句用offsetLeft，但是奈何他的倔强，就想用oDiv.style.left来获取，得到的是个字符串，宁愿用parseInt去得到它的值。

问题

如例子，这种方式是得不到oDiv的left已实锤。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #div {
            width: 200px;
            height: 200px;
            background-color: #ccc;
            position: relative;
            left: 100px;
            top: 100px;
        }
    </style>

    <script>
        window.onload = () => {
            var oDiv = document.querySelector("#div");
            alert(oDiv.style.left);
        }
    </script>
</head>

<body>
    <div id="div"></div>
</body>

</html>

oDiv.style.left只能获取行间的样式（内联样式），嵌入样式和外联样式通过这种方法是获取不到的。

    <script>
        window.onload = () => {
            var oDiv = document.querySelector("#div");
            alert(oDiv.style.left);
        }
    </script>
</head>

<body>
    <div id="div" style="left: 300px;"></div>
</body>

解决办法

如果你想通过（元素.style.属性）获取到元素的属性值，我们可以通过写一个函数方法调用来获取。

首先呢先来了解一下 style ， currentStyle， getComputedStyle 三个方法的区别。

style方法各大浏览器都兼容，但正如上面所例的只能获取到行内样式，获取不到外部样式，如果行内没有样式，则返回的是空值。

currentStyle属性和getComputedStyle属性不能设置属性，只能获取。

currentStyle：只兼容IE浏览器

用法：obj.currentStyle.attr 或者 obj.currentStyle[“attr”]；

getComputedStyle:不兼容IE浏览器，兼容谷歌火狐。

用法：getComputedStyle(obj,[pseudoElt]) pseudoElt 对于普通元素设置为null，一般情况下设置为false为了兼容低版本的浏览器。

直接上方法：

function getStyle(obj, attr) {
	if (obj.currentStyle) {
		return obj.currentStyle[attr];
	} else {
		return getComputedStyle(obj, false)[attr];
	}
}

在js中为了获取外联样式的值可以直接调用此方法，

    <script>
        window.onload = () => {
            var oDiv = document.querySelector("#div");
            alert(getStyle(oDiv, "left"));
        }
        function getStyle(obj, attr) {
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, false)[attr];
            }
        }
    </script>
</head>

<body>
    <div id="div"></div>
</body>