Bagaimana untuk memadam atribut css dalam js

Cara menggunakan JavaScript untuk memadam atribut CSS

Dalam proses menggunakan JavaScript untuk pembangunan web, selalunya perlu mengubah suai atau memadam atribut CSS. Dalam artikel ini, kami akan menerangkan cara mengalih keluar sifat CSS menggunakan JavaScript.

1. Dapatkan elemen

Sebelum mengubah suai sifat CSS, kita perlu mendapatkan elemen untuk diubah suai. Kita boleh mendapatkan elemen menggunakan kaedah berikut:

1. Dapatkan elemen mengikut ID:

var element = document.getElementById("elementId");

2. Dapatkan elemen mengikut nama teg:

var element = document.getElementsByTagName("elementTagName")[0];

3. Dapatkan elemen mengikut nama kelas:

var elements = document.getElementsByClassName("elementClassName");

2. Padamkan atribut CSS

Selepas mendapat elemen, kita perlu gunakan JavaScript untuk memadamkan atribut CSS. Terdapat dua kaedah berikut:

1. Gunakan kaedah removeProperty

Kaedah removeProperty boleh memadamkan nilai harta yang ditentukan.

element.style.removeProperty("propertyName");

Antaranya, propertyName ialah nama harta CSS yang akan dipadamkan.

Sebagai contoh, jika kita ingin memadamkan atribut warna bagi elemen dengan id "elementId", kita boleh menggunakan kod berikut:

var element = document.getElementById("elementId");
element.style.removeProperty("color");

2. Gunakan tugasan langsung kepada kaedah ""

Kami juga boleh terus memberikan nilai atribut CSS kepada rentetan kosong "" untuk memadamkan atribut.

element.style.propertyName = "";

Contohnya, jika kita ingin memadamkan atribut warna bagi elemen dengan id "elementId", kita boleh menggunakan kod berikut:

var element = document.getElementById("elementId");
element.style.color = "";

3 senario khusus

Yang berikut menggunakan senario khusus untuk menunjukkan cara menggunakan JavaScript untuk memadam sifat CSS. Kami mempunyai butang Apabila butang diklik, atribut warna tag h1 perlu dipadamkan.

Kod HTML:

<h1 id="title">Hello, World!</h1>
<button id="button">Click</button>

Kod JavaScript:

var button = document.getElementById("button");
var title = document.getElementById("title");

button.addEventListener("click", function() {
  title.style.color = "";
});

Dalam kod di atas, kami mula-mula mendapat butang dan teg h1. Kemudian, kami menambah pendengar acara klik pada butang. Apabila butang diklik, pengendali acara klik akan menetapkan atribut warna teg h1 kepada rentetan kosong, sekali gus memadamkan atribut.

Ringkasan

Di atas ialah cara untuk memadamkan atribut CSS menggunakan JavaScript. Kita boleh menggunakan kaedah removeProperty atau tetapkan nilai harta secara terus kepada rentetan kosong untuk mencapai pemadaman. Dalam aplikasi tertentu, kita perlu terlebih dahulu mendapatkan elemen untuk diubah suai, dan kemudian menambah pendengar acara yang sepadan untuk mencetuskan operasi pemadaman.

Atas ialah kandungan terperinci Bagaimana untuk memadam atribut css dalam js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!