div , p などのタグに直接書くタイプの CSS を JavaScript で変更するテスト（ setAttribute メソッド編）。

JavaScript で CSS 変更（ setAttribute メソッド編）

https://pulogu.net/wordpress/wp-content/uploads/2023/11/js-setAttribute-method-css-change.html

サンプルページ内に <div> タグが 2 つ作成してあります。 id 名は「div1」と「div2」になっています。

<div id="div1">id=div1</div>
<div id="div2">id=div2</div>

目次まで戻る

背景色

下記コードを実行してみました。 div1 の背景色をライムに変更する内容になっています。 setAttribute メソッドに設定する CSS は通常の書式で良いようです。

function test1(){
  let a=document.getElementById("div1"); //div1 タグをオブジェクトで取得
  a.setAttribute("style","background-color:lime"); //属性名、値を設定
}
test1();

function test2(){
  let a=document.getElementById("div1"); //div1 タグをオブジェクトで取得
  let b=document.getElementById("div2"); //div2 タグをオブジェクトで取得
  a.setAttribute("style","background-color:lime"); //属性名、値を設定
  let c=a.getAttribute("style"); //値取得
  b.textContent=c; //値出力
}
test2();

function test3(){
  let a=document.getElementById("div1");
  let b=document.getElementById("div2");
  a.setAttribute("style","border-width:24px"); //枠線変更
  let c=a.getAttribute("style");
  b.textContent=c;
}
test3();

背景色と枠線を同時に変更する下記コードを実行してみました。

function test4(){
  let a=document.getElementById("div1");
  let b=document.getElementById("div2");
  a.setAttribute("style","background-color:lime;border-width:24px");
  let c=a.getAttribute("style");
  b.textContent=c;
}
test4();

実行結果は、以下のようになりました。複数の CSS を変更する事が出来ました。

[ Amazon.co.jp アソシエイト ] JavaScript 関係の本

https://amzn.to/48EoeGM