JavaScript入門 CSSのプロパティを操作



こんにちは。レモンティーです。

今回はJavaScriptCSSのプロパティを操作してみます。

↓のように要素を取得して、.style.プロパティ = 値 とすればOKです。

let x = document.getElementById("testId");
x.style.color = "red";


これはテストのための文です。


もっと他の例も見てみます。


表示・非表示の切り替えも同様に
display = "none" ←→ display = "block" 等
visibility = "hidden" ←→ visibility = "visible"
を使うことで実現できます。



HTML

<div id="sample2">消したいもの</div>

SCC

    let x = document.getElementById("sample2");

     if(x.style.display == "inline"){
      x.style.display = "none";
    }else{
      x.style.display = "inline";
    }



要素の移動もできます。





lemontea












コードはこんな感じです。

HTML

<img id="sample3" src="https://path/"
width="200" height="200" border="2" alt="lemontea" >
<button type="button" onclick="test3(120)">ひだり</button>
<button type="button" onclick="test3(320)">みぎ</button>

JS

  function test3(num){
    let x = document.getElementById("sample3");
    x.style.left = `${num}px`;
  }

今回はこれでおしまいです。
www.sawalemontea.com