Question

我有一个可以更改样式表的Web程序（不要问），我需要使用jquery获取类的background-color属性值。类如下所示，但每个样式表都有不同的颜色。

DIV.row.error DIV.field INPUT.input-field

{ 背景：#fbdad8; 边框：1px＃ef4035 solid; -webkit-border-radius：0.3em; -moz-border-radius：0.3em; -o-border-radius：0.3em; border-radius：0.3em; }

我之前尝试过使用这些代码，但它始终是白色的，有什么想法吗？

      var checked = $('#<%=chkTermsAgreed.ClientID %>').attr('checked');
      var toChange = $('#<%=lblTermsAgreed.ClientID %>')

      if (!checked) {

          var bgColor = $('<div class=\"row error\"><input class=\"input-field\"/></div>').hide().appendTo("body");
          bgColor = bgColor.find('.input-field');
          toChange.css('background-color', bgColor.css('background-color'));
          bgColor.remove();
       }

Answer 1

即使没有该类的元素，我看到能够获得背景颜色的唯一解决方案是在js中读取样式表。

好消息是它们是可浏览的对象，并且在它们尚未被解析时读取它们是有效的。

您可以在此类所有规则上进行迭代，以便找到背景颜色：

for (var i=0; i<document.styleSheets.length; i++) {
        var styleSheet = document.styleSheets[i];
        var cssRules = styleSheet.rules; // chrome, IE
        if (!cssRules) cssRules = styleSheet.cssRules; // firefox
        for (var j=0; j<cssRules.length; j++) {
            var rule = cssRules[j];
            console.log(styleSheet.href, rule);
            if (rule.selectorText=="DIV.row.error DIV.field INPUT.input-field") {
                console.log('found it : ', rule.style.getPropertyValue('background-color'));
            }
        }
    }
}

Answer 2

据我了解你正试图获得$('div.row.error input[class="input-field"]')类的背景颜色样式。当你澄清你想要得到的东西时，这个问题就解决了：

类选择器足以标记没有空格的名称
您可以按标签[attribute =“value”]选择

带

如果您足够空间并在编写主选择器时输入新的选择器;你找到了

的子选择器。
如果您选择一个元素或一个组一个类，您可以更改或获取它的任何属性。

现在让我们的代码。这是我的建议：

var checked = $('#<%=chkTermsAgreed.ClientID %>').attr('checked'); var toChange = $('#<%=lblTermsAgreed.ClientID %>'); var source = $('div.row.error input[class="input-field"]'); if (!checked) { toChange.css('background-color', source.css('background-color')); }

我在检查员中尝试了选择器。有用。希望这可以帮助。欢呼声。

如何使用jquery从样式表中获取背景颜色

2 个答案: