classList

21580 ワード

classList
🚀 尿素中css클래스를 추가, 제거, 전환に用いられる.
🚀 以上の属性は読み取り専用ですが、add()とremove()の方法で変更できます.
🚩 1つ以上のclassプロパティを追加

document.getElementById("myDIV").classList.add("mystyle");
document.getElementById("myDIV").classList.add("mystyle", "anotherClass");
document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

例

<body>
  <button onclick="myFunction()">Try it</button>

  <div id="myDIV">
  	I am a DIV element
  </div>
<body>

<style>
.mystyle {
  width: 500px;
  height: 50px;
  padding: 15px;
  border: 1px solid black;
}

.anotherClass {
  background-color: coral;
  color: white;
}

.thirdClass {
  text-transform: uppercase;
  text-align: center;
  font-size: 25px;
}
</style>

<script>
function myFunction() {
  document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
}
</script>

🚩 1つ以上のclassプロパティを削除

document.getElementById("myDIV").classList.remove("mystyle");
document.getElementById("myDIV").classList.remove("mystyle", "anotherClass");
document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");
// 기존 적용되어 있는 속성 중에서 빼기

例

<body>
  <button onclick="myFunction()">Try it</button>

  <div id="myDIV" class="mystyle">
  	I am a DIV element
  </div>
<body>

<style>
.mystyle {
  width: 500px;
  height: 50px;
  padding: 15px;
  border: 1px solid black;
}
</style>

<script>
function myFunction() {
  document.getElementById("myDIV").classList.remove("mystyle");
}
</script>

🚩 切り替えe 2つのクラス間の切り替えを削除する

document.getElementById("myDIV").classList.toggle("newClassName");

例

<body>
  <button onclick="myFunction()">Try it</button>

  <div id="myDIV" class="mystyle">
  	I am a DIV element
  </div>
<body>

<style>
.mystyle {
  width: 300px;
  height: 50px;
  background-color: coral;
  color: white;
  font-size: 25px;
}

.newClassName {
  width: 400px;
  height: 100px;
  background-color: lightblue;
  text-align: center;
  font-size: 25px;
  color: navy;
  margin-bottom: 10px;
}
</style>

<script>
function myFunction() {
  document.getElementById("myDIV").classList.toggle("newClassName");
}
</script>

🚗 classListのプロパティとメソッドの使用例
👉 尿素のclass 이름을 가져오기.

<div id="myDIV" class="mystyle anotherClass thirdClass">I am a DIV element</div>

let x = document.getElementById("myDIV").classList;

👉 要素のclass 이름 수 확인.

let x = document.getElementById("myDIV").classList.length;

👉 要素の첫 번째 클래스 이름 (인덱스 0)を取得します.

let x = document.getElementById("myDIV").classList.item(0);

👉 元素上"mystyle"클래스가 있는지 확인.

let x = document.getElementById("myDIV").classList.contains("mystyle");

👉 要素に「mystyle」クラスがあるかどうか、ある場合は他のクラス名を削除します.

let x = document.getElementById("myDIV");

if (x.classList.contains("mystyle")) {
       x.classList.remove("anotherClass");
} else {
       alert("Could not find it.");
}

Reference

この問題について(classList), 我々は、より多くの情報をここで見つけました https://velog.io/@kirin/classList

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

テーマ:ASP.NETに透かしを付ける

1-1.変数、関数、タイプ