JavaScript setAttribute()でclass名を書き換える方法

環境
Google Chrome　111.0.5563.147
Windows 10 Home 64bit

書式
document.querySelector('セレクター名’).setAttribute('class’, '書き換えるクラス名’);
setAttribute()は要素の属性を追加する事が可能な関数ですが、既に値が存在している属性の場合は上書きされます。

使用例

<!DOCTYPE html>
<html>
<body>

<div id="ts" class="cityA">東京</div> <br>

<button>確認</button>

<script>
function funA() {
 document.querySelector('#ts').setAttribute('class', 'cityB');
  console.log(document.querySelector('#ts'));
}
</script>

</body>
</html>

実行結果
「確認」ボタンを押すと、クラス「cityA」は消え、「cityB」に上書きされます。

JavaScript

Posted by arkgame