根据这个答案，我得到了所有的元素样式，
主页.html
<div id="divClass" class="myclass">Text Here</div>
样式文件
#divClass{
color:red;
background-color:black;
float:left;
}
脚本.js
function copyComputedStyle(a) {
var sheets = document.styleSheets,
o = {};
for (var i in sheets) {
var rules = sheets[i].rules || sheets[i].cssRules;
for (var r in rules) {
if (a.is(rules[r].selectorText)) {
o = $.extend(o, css2json(rules[r].style), css2json(a.attr('style')));
}
}
}
return o;
}
function css2json(css) {
var s = {};
var pattern = /^[1-9][0-9]?$|^100$/;
if (!css) return s;
if (css instanceof CSSStyleDeclaration) {
for (var i in css) {
if (css[i].toLowerCase) {
// Some of the key value pairs were vice versa, so try to make them in order!
// Ex: 0:flex-grow; 0:flex-shrink; --------> flex-grow: 0; flex-shrink: 0;
// End
if (pattern.test(css[i])) {
s[css[css[i]].toLowerCase()] = css[i];
} else {
s[css[i].toLowerCase()] = css[css[i]];
}
}
}
} else if (typeof css == 'string') {
css = css.split('; ');
for (var i in css) {
var l = css[i].split(': ');
s[l[0].toLowerCase()] = l[1];
}
}
return s;
}
console.log(copyComputedStyle($("#divClass")));
它返回一个对象
{
background-color: "black",
color: "red",
float: "left",
left: ""
}
现在，当我向这个 div添加任何伪选择器hover或before和时after，copyComputedStyle不会记录添加的样式并返回与以前相同的样式！
#divClass{
color:red;
background-color:black;
float:left;
}
#divClass:hover{
color:blue;
}
我怎样才能克服它？
问题是在使用时.is()，尤其是当#divClass与#divClass: hover
一种解决方案是使用 indexOf 来确保找到与元素 ID 匹配的选择器：
改变这个： if (a.is(rules[r].selectorText)) {
为了这： if (rules[r].selectorText && rules[r].selectorText.indexOf(a.attr('id')) != -1) {
如果您更改代码中的该行，它将返回如下内容：
{
background-color: "black",
color: "blue",
float: "left",
left: ""
}
这是因为color对象中有重复的属性，而后者占主导地位，我个人会做的是将每个选择器的样式分组的对象：
function copyComputedStyle(a) {
var sheets = document.styleSheets,
o = {},
objrules = [];
for (var i in sheets) {
var rules = sheets[i].rules || sheets[i].cssRules;
for (var r in rules) {
if (rules[r].selectorText && rules[r].selectorText.indexOf(a.attr('id')) != -1) {
o = $.extend({},css2json(rules[r].style));
objrules.push({'selector' : [rules[r].selectorText], 'style' : o});
}
}
}
return objrules;
}
function css2json(css) {
var s = {};
var pattern = /^[1-9][0-9]?$|^100$/;
if (!css) return s;
if (css instanceof CSSStyleDeclaration) {
for (var i in css) {
if (css[i].toLowerCase) {
// Some of the key value pairs were vice versa, so try to make them in order!
// Ex: 0:flex-grow; 0:flex-shrink; --------> flex-grow: 0; flex-shrink: 0;
// End
if (pattern.test(css[i])) {
s[css[css[i]].toLowerCase()] = css[i];
} else {
s[css[i].toLowerCase()] = css[css[i]];
}
}
}
} else if (typeof css == 'string') {
css = css.split('; ');
for (var i in css) {
var l = css[i].split(': ');
s[l[0].toLowerCase()] = l[1];
}
}
return s;
}
console.log(copyComputedStyle($("#divClass")));
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句