ホームページ > ウェブフロントエンド > jsチュートリアル > CSS ルールの内容全体を文字列として抽出するにはどうすればよいですか?

CSS ルールの内容全体を文字列として抽出するにはどうすればよいですか?

Linda Hamilton
リリース: 2024-12-13 02:36:11
オリジナル
161 人が閲覧しました

How to Extract the Entire CSS Rule Content as a String?

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) {
            //this is where I can collect the style information, but how?
        }
    }
}
getStyle('.test')
ログイン後にコピー

sunliffe の回答に基づいて構築し、別のソースから適応して、このコードを拡張して CSS ルールを抽出できます。値:

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;
}

alert(getStyle('.test'));
ログイン後にコピー

このコードは CSS ルールを調べて、セレクター テキストが指定されたクラス名と一致するかどうかを確認します。一致ルールごとに、対応する CSS テキストを収集し、それを cssText 変数に蓄積します。最後に、この関数は蓄積された CSS テキストを返し、必要なインライン スタイル形式の文字列を提供します。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート