CSS クラスの宣言を文字列として取得するにはどうすればよいですか?-jsチュートリアル-php.cn

CSS クラスの宣言を文字列として取得するにはどうすればよいですか?

Susan Sarandon

リリース： 2024-12-11 11:30:12

オリジナル

842 人が閲覧しました

How Can I Retrieve a CSS Class's Declaration as a String?

CSS ルール値にアクセスして読み取る方法

質問:

完全な CSS 宣言を取得するにはどうすればよいですか?特定のクラスとしてstring?

Context:

次の HTML と CSS を考えてみましょう:

<html>
  <head>
    <style>
      .test {
        width: 80px;
        height: 50px;
        background-color: #808080;
      }
    </style>
  </head>
  <body>
    <div class="test"></div>
  </body>
</html>

ログイン後にコピー

この CSS が与えられた場合、次のような文字列を返したいと考えています。個々のスタイルに直接アクセスせずに、.test クラスのインラインスタイル表現プロパティ.

答え:

特定のクラスの完全な CSS 宣言を取得するには:

function getStyle(className) {
  var cssText = "";

  // Get all CSS rules
  var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;

  // Iterate through rules
  for (var x = 0; x < classes.length; x++) {
    // If the class name matches the rule
    if (classes[x].selectorText == className) {
      // Capture the CSS declaration
      cssText += classes[x].cssText || classes[x].style.cssText;
    }
  }

  // Return the captured CSS declaration
  return cssText;
}

// Usage example:
var result = getStyle(".test");
console.log(result); // Output: "width: 80px; height: 50px; background-color: #808080;"

ログイン後にコピー

以上がCSS クラスの宣言を文字列として取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。