获取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样式 - Python技术站
微信扫一扫 
支付宝扫一扫 