「JavaScript」querySelectorで合致したCSSセレクタ最初要素を取得する

2021年10月14日

構文
document.querySelector(“.クラス名").style.backgroundColor = 値
document.querySelector( CSSセレクタ )
最初に合致したHTML要素を取得します。

使用例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>querySelectorでクラスセレクタ要素を取得</title>
</head>
<body>
<h2 class="cft">class="cft" タイトル　querySelector適用</h2>

<p class="cft"> class="cft" 段落　　querySelector適用しない</p>
      
<p>ボタンを押下すると タイトル「class="cft"」 要素の背景色を変更</p>

<button>テスト</button>
<script>
function myFunction() {
      //クラスcftの最初要素の背景色を変更　最初に合致したHTML要素を取得
    document.querySelector(".cft").style.backgroundColor = "skyblue";
}
</script>

</body>
</html>

 

JavaScript

Posted by arkgame