要素のclass名を取得・追加・変更・削除するサンプル

動的なコンテンツを作る際は既に存在する要素にclass名を追加したり削除したい事が結構ありますね

要素のclass名を取得する

javaScript
javaScriptではclassNameを使ってclass名を取得します
let target = document.getElementById("sample");
let classNames = target.className;//class名取得
console.log(className);
Jquery
Jqueryではattr('class')を使ってclass名を取得します
let classNames = $('#sample').attr('class');//class名取得
console.log(className);

要素のclass名を取得する動作サンプル


要素のclass名を変更

javaScript
javaScriptでは要素.classNameにてclass名を変更(書き換え)します
let target = document.getElementById("sample");
target.className = "Guwooo";//class名変更
let classNames = target.className;//class名取得
console.log(className);
Jquery
JqueryではremoveClass()でclass名を削除した後にaddClass()を使ってclass名を追加する事で変更とする事が可能です
$('#sample').removeClass().addClass("Gheeee");//class名変更
let classNames = $('#sample').attr('class');//class名取得
console.log(className);

要素のclass名を変更する動作サンプル




要素にclass名を追加

javaScript
javaScriptでは要素.classList.add()を使ってclass名を追加します
let target = document.getElementById("sample");
target.classList.add("Guhehe");//class名追加
let classNames = target.className;//class名取得
console.log(className);
Jquery
JqueryではaddClassにてclass名を追加できます
$('#sample').addClass("Guhhoho");//class名追加
let classNames = $('#sample').attr('class');//class名取得
console.log(className);

要素のclass名を追加する動作サンプル


要素のclass名を削除

javaScript
javaScriptでは要素.classNameの値を空にする事でclass名を削除可能です
let target = document.getElementById("sample");
target.className = "";//class名を削除
let classNames = target.className;//class名取得
console.log(className);
Jquery
JqueryではremoveClass("class名")にて特定のclass名を削除、引数なしにて全てのclass名を削除できます
$('#sample').removeClass();//class名を削除
let classNames = $('#sample').attr('class');//class名取得
console.log(className);

要素のclass名を追加する動作サンプル

  • このエントリーをはてなブックマークに追加

0 件のコメント :