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 onclick="funA()">確認</button>
<script>
function funA() {
document.querySelector('#ts').setAttribute('class', 'cityB');
console.log(document.querySelector('#ts'));
}
</script>
</body>
</html>
実行結果
「確認」ボタンを押すと、クラス「cityA」は消え、「cityB」に上書きされます。