2

たとえば、次のような css があるとします。

.divType1 {
    position: absolute;
    width: 60px; height: 60px;
    left: 400px; top: 100px;
    border: 1px solid #89B;
    z-index: 0;
 }

Javascript 内で div クラス divType1 の css 属性を収集したいのですが、div クラスでのみ提供されているため、フォーム (疑似コード) の何かを行うことはできません。

selectDivWithClass( divType1 ).getCss(left).

クラス divType1 で div をインスタンス化し、その css 属性を取得して破棄することで何かをハッキングできますが、より良い方法はありますか?

元の質問にはあいまいさがあり、他の設定でも機能する多くの適切な回答が得られます。だからここに言い直したものがあります：

Javascript を使用して、メーカーがスタイルシートで指定した div クラスの css 属性のサブセットを収集するにはどうすればよいので、ブラウザーのデフォルトはありません。さらに、「plain-vanilla」属性のみが css に表示されると仮定します。したがって、次のようなものではなく、幅、高さなどです。

transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */

クラス名しか与えられないため、事前に収集する必要がある属性のリストは与えられません。

最後に、この関数は、オブジェクト マッピング スタイル属性を値に返すことが理想的です。

私がやろうとしていることの範囲では、問題は以下の@RobGの回答によって解決されます。

4

5 に答える 5

3

document.styleSheetsを反復処理できますが、その多くは、そのクラスで DocumentFragment をインスタンス化してその属性を取得するよりも必ずしも高速ではありません。

var stylesheets = document.styleSheets;
for (var i=0; i < stylesheets.length; i++) {
    var rules = stylesheets[i].cssRules || stylesheets[i].rules;
    for (var j=0, rule; rule = rules[j++]; ) {
        if (rule.selectorText === '.divType1') {
            alert(rule.style.left)
        }
    }
}

フィドル: http://jsfiddle.net/dandv/VnCMR/1/

于 2012-11-11T22:39:35.013 に答える
1

これにより、最初のスタイルシートにすべてのテキストが表示されます

document.styleSheets[0].ownerNode.innerHTML

この関数はセレクター文字列を受け入れ、そのテキスト値を返す必要があります

function getStyleBySelector(selector) {
    var sheets = document.styleSheets;
    var selectorRule = false;

    for(var x = 0; x < sheets.length; x++) {
        var rules = sheets[x].cssRules;
        for(var y = 0; y < rules.length; y++) {
            if(rules[y].selectorText == selector) {
                selectorRule = rules[y]
                break;
            }
        }

        if(selectorRule) {
            break;
        }
    }

    var styling = {};

    if(selectorRule) {
        return selectorRule.cssText
    }

    return styling;
}

あなたの場合、それを呼び出します

getStyleBySelector(".divType1");
于 2012-11-11T23:00:55.477 に答える
1

ここでは簡単にクロスブラウザ地獄に陥ります。

既存の要素（すでに述べたようにドキュメントフラグメントを使用して作成できる）がある場合、（少なくともクロムで）機能するのは

var el = document.getElementsByClassName("divType1")[0];
alert(window.getComputedStyle(el).getPropertyValue("left"));

しかし、これを見ると、ここで jQuery のような JavaScript ライブラリを使用することを選択するかもしれません。

于 2012-11-11T22:40:14.793 に答える
1

div に追加して詳細を確認できますか? これは jQuery でうまく機能しますが、残念ながら同等の JavaScript には、スタイル オブジェクトにクラス ベースのスタイルが含まれていません。そう：

var d = $("<div>").addClass("divType1");
console.log(d.css("left"));

jQueryで動作します。これはJSではありません：

var d = document.createElement("div");
d.className = "divType1";
console.log(d.style.left);
于 2012-11-11T22:34:21.317 に答える
1

ルールが適用された要素の検査は、他のすべてのルールとデフォルト プロパティの影響を除外できない限り機能しません (ブラウザーによって異なる場合があり、一部のブラウザーではルール プロパティと同じである場合とそうでない場合があります)。 . デフォルト設定の 1 つまたは 2 つのブラウザーで成功する可能性は低いようです。

クロスブラウザー方式で CSS ルール テキストをテキストとして取得するには、次のようなものを使用します。

function getCssRule(selector) {
  var sheets = document.styleSheets;
  var rulesObj, rules, ruleText;

  if (sheets.length) {

    // Determine the name of the rules object
    rulesObj = typeof sheets[0].cssRules != 'undefined'? 'cssRules' : 'rules';

    for (var i=0, iLen=sheets.length; i<iLen; i++) {
      rules = sheets[i][rulesObj];

      for (var j=0, jLen=rules.length; j<jLen; j++) {
        if (rules[j].selectorText.indexOf(selector) > -1) {
          return rules[j].cssText;
        }
      }
    }
  }
}

これにより、ルールの実際のテキストが返されることに注意してください。

また、CSSValueプロパティがありますが、サポートが不明です。

編集

セレクターではなくルール部分のみを扱っている場合は、次のようなものを使用してオブジェクトに変換できるはずです。

function cssTextToObj(cssText) {

  // Trim selector, initial { and closing } plus whitespace, split on ';'
  var props = cssText.replace(/^[^{]+{\s*/,'').replace(/\s*}\s*$/,'').split(';');
  var resultObj = {};
  var bits;

  for (var i=0, iLen=props.length; i<iLen; i++) {

    // Split each property assignment on ':' only where
    // props[i] has a value
    if (props[i] != '') {
      bits = props[i].split(':');
      resultObj[bits[0]] = bits[1];
    }
  }
  return resultObj;
}

プロパティ名と先頭および末尾のスペースの値を削除したい場合がありますが、それでうまくいくはずです。ただし、私は CSS プロパティの専門家ではないため、上記を微調整する必要があるかもしれません。

末尾に「;」がある場合は注意してください。(元のルールにルールがなかった場合にブラウザが追加するように見える)、最後のメンバーはprops'' (空の文字列) になります。

絶対に保証できないことの 1 つは、プロパティがどのような順序for..inで返されるかを知ることができるということではありません。cssTextIE は独自の順序で戻るようですが、Firefox は元の順序を維持しているようです。

于 2012-11-12T00:34:16.657 に答える