ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript で CSS ルールの内容を取得するにはどうすればよいですか?

JavaScript で CSS ルールの内容を取得するにはどうすればよいですか?

Susan Sarandon
リリース: 2024-12-11 02:39:09
オリジナル
283 人が閲覧しました

How Can I Retrieve the Contents of CSS Rules in JavaScript?

CSS ルールのコンテンツの取得

CSS ルールの値にアクセスする方法を知ることは、動的なスタイル設定やプレゼンテーションの操作に役立ちます。あなたの要素。

CSS ルールのすべての内容を含む文字列をインライン スタイル形式で返すには、次の方法を使用できます:

function getStyle(className) {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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'));

このコード内:

  • getStyle は、CSS クラス名を入力として受け取り、そのルール値を含む文字列を返す関数です。そのクラス。
  • classes は、ドキュメントの最初のスタイルシートにあるすべての CSS ルールの配列です。
  • ループはルールを反復処理し、selectorText プロパティ (関連付けられたセレクターが含まれているかどうかを確認します)
  • 一致が見つかった場合、cssText プロパティ (ルールのインライン表現を含む) が追加されます
  • 最後に、cssText 変数が返され、アラート ボックスに表示されます。

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

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