给定以下 CSS:
.myClass1 {
width: 50px;
}
.myClass2 {
width: 150px;
}
以及以下 HTML:
...
<div id="myDiv">...</div>
...
有没有一种方法可以在不引用元素本身的情况下确定类内部的值?
JQuery.someFunc(".myClass1").width()
或者我是否必须将类分配给元素,然后检查实际的属性值,如下所示:
function CheckClassWidthValue() {
var $myDiv = $("#myDiv");
$myDiv.removeClass();
$myDiv.addClass("myClass1");
var class1Width = $myDiv.width();
$myDiv.removeClass();
$myDiv.addClass("myClass2");
var class2Width = $myDiv.width();
}
如果我可以直接从 CSS 类名中提取值,我正在编写的代码会更加清晰。最好避免定位 CSS 元素、解析代码。
谢谢!
最佳答案
假设页面只有一个样式表(索引0
),这很简单。像这样:
function getStyleDeclaration(selector, property) {
return [...document.styleSheets[0].cssRules].filter(
rule => rule.selectorText === selector
)[0].style[property];
}
function getStyleDeclarations(selector) {
const declarations = [...document.styleSheets[0].cssRules].filter(
rule => rule.selectorText === selector
)[0].style;
return Object.keys(declarations).reduce((acc, val) => {
return { ...acc,
[declarations[val]]: declarations[declarations[val]]
}
}, {});
}
console.log(getStyleDeclaration('.myClass1', 'width'));
console.log(getStyleDeclaration('.myClass2', 'color'));
console.log(getStyleDeclarations('.myClass2'));
.myClass1 {
width: 50px;
}
.myClass2 {
color: rgb(242, 242, 248);
height: 100vh;
width: 150em;
}
关于jquery - 有没有办法使用 JQuery 从 css 类获取类定义或值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59493389/