「JavaScript」ElementオブジェクトのquerySelectorでCSSセレクタを取得

2021年10月14日

書式
document.querySelector(cssセレクタ).style.border = 値;
Element オブジェクトで、文書内で指定された CSS セレクターに最初に一致する要素を示すオブジェクト、もしくは、一致する要素がない場合は null を返します。

使用例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>querySelectorでtarget属性を操作するサンプル</title>
<style>
a[target] {
    background-color: yellow;
}
</style>
</head>
<body>

<p> CSSセレクタ a[target]で背景色は黄色です</p>
      
<!-- targetリンクあり　targetリンクなし -->
<a href="//www.google.co.jp">google</a>
<a href="//www.twitter.com" target="_blank">twiiter</a>
<a href="//www.facebook.com" target="_top">facebook</a>
      
<p>ボタン「テスト」を押下すると、target属性の最初リンクの背景色を追加する</p>

<button onclick="tFun()">テスト</button>

<script>
function tFun() {
      //a[target]セレクタの最初要素のcssを変更
    document.querySelector("a[target]").style.border = "10px solid skyblue";
}
</script>

</body>
</html>

 

JavaScript

Posted by arkgame