jsでcssプロパティを変更する方法

CSS 属性を変更するための JS メソッド: 1. スタイル スタイル、構文「スタイル シートの指定された内容.style.Attribute="value"」を変更します。 2. 特定の要素ノードのスタイル コンテンツを変更します。 、構文 "要素オブジェクト" .style.cssText="スタイル値""; 3. setAttribute() 関数を使用します。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

ネイティブ JS で CSS プロパティを変更するには 3 つの方法があります

• スタイルを変更する
  document.styleSheets[n] // n変更が期待されるスタイル シートのシリアル番号を表します。変更が期待されるスタイル シートを取得するには、0 からカウントが開始されます。スタイル シートの CSS コンテンツは cssRules[0] を通じて取得され、特定のスタイルスタイルによって変更されます。 (この方法はさらに面倒で、スタイル シートでスタイルの順序を明確に指定する必要があります)

• 特定の要素ノードのスタイル コンテンツを変更する
  cssText は一度に複数回変更できます css 属性
  style.attrName 単一の属性の値を変更します attrName

• setAttribute を使用してスタイル属性値を変更します

---

HTML コード

<div class="test" style="height: 100px;">TEST</div>
<button class="cssText">cssText</button>
<button class="setAttribute">setAttribute</button>
<button class="stylesheet ">stylesheet </button>

CSS コード

.test {
   font-size: 30px;
   color: blue;
   background-color: blueviolet
}

JS コード

    var testNode = document.getElementsByClassName("test")[0];
    var cssTextBtn = document.getElementsByClassName("cssText")[0];
    var attributeBtn = document.getElementsByClassName("setAttribute")[0];
    var stylesheetBtn = document.getElementsByClassName("stylesheet")[0];
    
    // 1. 修改style样式: 
    stylesheetBtn.addEventListener('click', function(e) {
        var stylesheet = document.styleSheets[0];
        stylesheet.cssRules[0].style.backgroundColor = "green";
    }, false);
    
    // 2. 修改特定元素节点的style内容
    cssTextBtn.addEventListener('click', function(e) {
        testNode.style.cssText = "width: 300px; background-color: red; height: 200px;"
        testNode.style.border = "1px solid black"
    }, true);
    
    // 3. 通过setAttribute 修改style属性值
    attributeBtn.addEventListener('click', function(e) {
        testNode.setAttribute('style', 'width: 400px; background-color: yellow; height: 300px;')
    }, false)

[推奨学習: JavaScript 上級チュートリアル ##]

以上がjsでcssプロパティを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。