CSS javaScript

要素の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);

新記事：【jQuery】要素やその親子要素からid・class名を取得するパターンまとめ | ONE NOTE

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

See the Pen 要素のclass名を取得する by yochans (@yochans) on CodePen.

要素の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名を変更する動作サンプル

See the Pen 要素のclass名を変更する by yochans (@yochans) on CodePen.

<!–more–>

要素に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名を追加する動作サンプル

See the Pen 要素のclass名を追加する by yochans (@yochans) on CodePen.

要素の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名を追加する動作サンプル

See the Pen 要素のclass名を削除する by yochans (@yochans) on CodePen.