时间戳

首页 > 解决方案 > 文档 styleSheets 使用伪选择器获取元素上的所有样式

javascript - 文档 styleSheets 使用伪选择器获取元素上的所有样式

问题描述

根据这个答案，我得到了所有的元素样式，

主页.html

<div id="divClass" class="myclass">Text Here</div>

样式.css

#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或beforeand时，不会记录添加的样式并返回与以前相同的样式！aftercopyComputedStyle

#divClass{    
   color:red; 
   background-color:black;
   float:left;
}
#divClass:hover{    
   color:blue; 
}

我该如何克服呢？

标签： javascripthtmljquery

解决方案

问题是在使用时.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")));

推荐阅读