JavaScript が要素にクラスを追加
このチュートリアルでは、JavaScript の classList プロパティを使用して、特定の要素にクラスを追加する方法について説明します。
JavaScript の classList プロパティを使用して、指定された要素にクラスを追加する
JavaScript の特定の要素にクラスを追加する場合は、classList プロパティを使用できます。まず、指定された要素を取得する必要があります。そのための最も簡単な方法は、id を使用して取得することです。id が要素に与えられていないとします。その場合、一意の id を指定し、JavaScript の getElementById プロパティを使用して要素を取得し、変数に格納できます。その後、変数を使用して、classList プロパティを使用してそのプロパティを変更できます。たとえば、ボタンを使用してテキストのクラスを変更してみましょう。以下のコードを参照してください。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.newclass {
width: 90%;
padding: 30px;
background-color: red;
color: yellow;
font-size: 30px;
}
</style>
<body>
<button onclick="myFun()">Try it</button>
<div id="test">
Adding Class Test
</div>
<script type="text/javascript">
function myFun() {
var ob = document.getElementById("test");
ob.classList.add("newclass");
}
</script>
</body>
</html>
上記のコードには、クラスオブジェクトのプロパティを設定するスタイルタグがあります。body タグ内にはボタンとテキストがあり、script タグ内では、id を使用してテキストのクラスを変更しています。この例では、スタイルシートと JavaScript コードは同じ HTML ファイル内に配置されていますが、それらを別々のファイルに配置して HTML ファイルにリンクすることもできます。上記のコードを実行するには、コードを HTML ファイルにコピーし、ブラウザを使用して開く必要があります。
出力：
出力でわかるように、ボタンといくつかのテキストがあります。このボタンを押すと、テキストのクラスが変更されます。
ボタンを押したときの出力：
出力からわかるように、クラスの変更によりテキストの形状が変更されています。この例では、ボタンを使用して要素のクラスを変更していますが、特定の要素のクラスを変更する条件を変更できます。Internet Explorer 9 では classList プロパティを使用できません。代わりに、+= 演算子を使用して、特定の要素にプロパティを追加できます。スクリプトタグ内の myFun 関数の最後の行を次の行に変更する必要があります。
ob.className += " newclass";
他のクラスが存在する可能性があるため、クラス名の前にスペースを使用する必要があります。
