CSS ルールのコンテンツ全体を文字列としてプログラムで抽出するにはどうすればよいですか?

CSS ルール値の抽出を理解する

フロントエンド開発の領域では、CSS ルールをプログラムで操作することは貴重なスキルです。この記事では、CSS ルールの内容全体を文字列として抽出するという特定の課題について詳しく説明します。目標は、ルール内に含まれる特定のスタイル プロパティを明示的に知らなくてもこれを達成することです。

まず、次の問題シナリオを検討してください。

文字列を取得しようとするシナリオに遭遇します。 CSS ルールの完全なコンテンツで構成され、インライン スタイルで見られる形式を複製します。このタスクには、特定のルールに存在する特定のプロパティに関係なくタスクを実行できる必要があります。

次の CSS が与えられたとします。

.test {
    width: 80px;
    height: 50px;
    background-color: #808080;
}

これまでのところ、次のコード:

function getStyle(className) {
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var x = 0; x < classes.length; x++) {
        if (classes[x].selectorText == className) {
            // Here's where you intend to gather style information but are unsure how.
        }
    }
}
getStyle(".test");

このパズルを解く鍵は、スタイル シートとルールの cssText プロパティを活用することにあります。コードを強化する方法は次のとおりです。

function getStyle(className) {
    var cssText = "";
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var x = 0; x < classes.length; x++) {
        if (classes[x].selectorText == className) {
            cssText += classes[x].cssText || classes[x].style.cssText;
        }
    }
    return cssText;
}

この改良版の getStyle 関数では、cssText プロパティを使用して、指定された className に関連するスタイル宣言のセット全体を収集します。結果の文字列 cssText は、アプリケーションで必要に応じて使用できます。

解決策を説明するために、結果をアラートに出力してみましょう。

alert(getStyle(".test"));

これにより、インラインが表示されます。 .test クラスの CSS ルールに相当するスタイル。

以上がCSS ルールのコンテンツ全体を文字列としてプログラムで抽出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。