0

スタイルシートを変更できる Web プログラムがあります (聞かないでください)。jquery を使用してクラスの background-color プロパティ値を取得する必要があります。クラスは次のようになりますが、各スタイル シートは異なる色になります。

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

{ 背景: #fbdad8; ボーダー:1px #ef4035 ソリッド; -webkit-border-radius: 0.3em; -moz-border-radius: 0.3em; -o-border-radius: 0.3em; ボーダー半径: 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();
       }
4

2 に答える 2

2

クラスの要素が存在しない場合でも背景色を取得できる唯一の解決策は、js でスタイルシートを読み取ることです。

幸いなことに、それらはブラウズ可能なオブジェクトであり、まだ解析されているため効率的に読み取ることができます。

たとえば、 background-color を見つけるために、次のようなすべてのルールを反復できます。

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'));
            }
        }
    }
}
于 2012-04-26T14:14:54.813 に答える
0

私が理解しているように、あなたは$('div.row.error input[class="input-field"]')クラスの背景色のスタイルを取得しようとしています。この問題は、取得したいものを明確にすると解決します。

  • クラスセレクターは、スペースなしで名前にタグを付けるのに十分です
  • tag [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'));
}

インスペクターでセレクターを試してみました。できます。お役に立てれば。乾杯。

于 2012-04-26T14:57:01.180 に答える