JavaScript 使用element.style.property获取元素的属性注意事项

自由如风709

已于 2023-12-03 20:00:15 修改

阅读量492

点赞数 11

文章标签： javascript 前端 vscode html5 css css3 html

于 2023-12-03 19:36:11 首次发布

本文链接：https://blog.csdn.net/qq_64195455/article/details/134768811

版权

在JavaScript中可以通过 元素.style.XXX 来获取和修改元素的属性，但是该方式 只能获取和修改行内样式 ，外部样式和内部样式是获取不到的，因此它具有较高的优先级，除非使用 !important。
例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div style="width: 100px; height: 100px;" id="box"></div>

    <script src="js/base.js"></script>
</body>
</html>

这里我设置了 div 的颜色为绿色
通过JavaScript打印输出

function getStyle(obj, name) {
    if (window.getComputedStyle) {
        return getComputedStyle(obj, null)[name];
    } else {
        return obj.currentStyle[name];
    }
}

var box = document.getElementById("box");
console.log(getStyle(box, "width"));
console.log(getStyle(box, "height"));
console.log(getStyle(box, "background-color"));
console.log(box.style.backgroundColor);

谷歌浏览器打开，查看控制台，发现打印为空
在这里插入图片描述
解决办法就是使用 window 自带的 getComputedStyle() 拿到获取属性，但是该方法只能读，不能修改，而且该函数必须使用IE8以上的浏览器。

另一种方式是通过JavaScript来添加或移除CSS类：

// 添加一个新的类
document.getElementById("myElement").classList.add('newClass');

// 移除一个已有的类
document.getElementById("myElement").classList.remove('existingClass');

总结

element.style.property 只能获取行内样式和修改行内样式
要想获取外部样式或者 style 标签的样式，可以使用 getComputedStyle() ,但是该方法只读，且存在兼容性问题，下面提供一个封装的函数解决兼容性问题
可以使用 classList 来修改样式

// 解决兼容性函数
function getStyle(obj, name) {
    if (window.getComputedStyle) {
    	// 正常浏览器
        return getComputedStyle(obj, null)[name];
    } else {
    	// IE8以下浏览器
        return obj.currentStyle[name];
    }
}

封面图

在这里插入图片描述

自由如风709

关注

11
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
JavaScript 使用element.style.property获取元素的属性注意事项

只能获取行内样式要想获取外部样式或者style标签的样式，可以使用但是该方法只读，且存在兼容性问题，下面提供一个封装的函数解决兼容性问题可以使用classList来修改样式// 解决兼容性函数// 正常浏览器} else {// IE8以下浏览器。
复制链接

扫一扫