沃梦达 / 编程技术 / 前端开发 / 正文

解析js如何获取css样式

沃梦达教程前端开发

2024-04-03

获取CSS样式主要有两种方式：

获取CSS样式主要有两种方式：

使用JavaScript内置的方法（window.getComputedStyle or element.currentStyle)
解析CSS文件

使用JavaScript内置的方法

1. window.getComputedStyle

window.getComputedStyle() 方法返回一个对象，该对象包含了指定元素的所有CSS属性的值（属于该元素本身的属性和来自层叠样式表的属性）。所以，当你想获取一个元素的CSS属性时，就可以使用这个方法获取。

let element = document.getElementById("myDiv")
let style = window.getComputedStyle(element, null);
console.log(style.getPropertyValue("background-color")); // 输出样式属性background-color的值

2. element.currentStyle

对于 IE 浏览器，使用 window.getComputedStyle() 不如 element.currentStyle 更可靠。它们的用法类似，如下所示：

 let element = document.getElementById("myDiv");
 console.log(element.currentStyle.backgroundColor);

解析CSS文件

如果想获取某个样式文件中的特定样式值，我们可以解析该样式文件并获取具体的样式值。下面是一个基本的代码示例：

HTML文件

<!DOCTYPE html>
<html>
<head>
    <title>解析CSS文件</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="myDiv">我是一个文本框</div>
    <script src="main.js"></script>
</body>
</html>

style.css 文件

#myDiv{
    width:100px;
    height:150px;
    background-color: #888;
    color: #fff;
}

main.js 文件

//从样式文件获取样式
function getStyle(className, styleName) {
    var classNames = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var x in classNames) {
        if (classNames[x].selectorText === className) {
            return classNames[x].style[styleName];
        }
    }
}

//打印背景颜色
console.log(getStyle("#myDiv", "background-color"));

此代码将会输出样式文件中 #myDiv 样式属性值的 background-color 的具体值，即 #888。

参考:https://www.cnblogs.com/liwenfeng/p/11734773.html

沃梦达教程

本文标题为：解析js如何获取css样式