Bagaimana untuk mengalih keluar sifat CSS menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk mengalih keluar sifat CSS menggunakan JavaScript?

王林

Lepaskan： 2023-09-10 18:09:03

ke hadapan

1431 orang telah melayarinya

如何使用 JavaScript 删除 CSS 属性？

Kadangkala, kita perlu mengalih keluar sifat CSS daripada elemen HTML selepas melaksanakan tugas tertentu. Contohnya, pengguna belum membayar yuran langganan untuk apl anda. Oleh itu, anda akan mempunyai mesej "Pembayaran Tertunggak" dalam "merah" dalam bahagian pengepala. Selepas pengguna menjelaskan pembayaran, anda boleh menukar kandungan pengepala dan mengalih keluar atribut "warna: merah" untuk menetapkan warna awal.

Terdapat banyak kes penggunaan yang memerlukan mengalih keluar sifat CSS daripada elemen HTML. Di sini kita akan mempelajari cara yang berbeza untuk mengalih keluar sifat CSS.

Gunakan kaedah removeProperty()

Kaedah pertama menggunakan kaedah removeProperty(). Ia digunakan untuk mengalih keluar sebarang atribut CSS daripada elemen HTML dan mengambil nama atribut sebagai parameter.

Tatabahasa

Pengguna boleh menggunakan kaedah removeProperty() untuk mengalih keluar sifat CSS daripada elemen HTML dengan mengikut sintaks berikut.

ele.style.removeProperty("property-name");

Salin selepas log masuk

Dalam sintaks di atas, "ele" ialah elemen HTML yang daripadanya kita perlu mengalih keluar atribut CSS.

Contoh

Dalam contoh di bawah, kami telah mencipta elemen div dengan sifat CSS yang berbeza seperti "lebar", "tinggi", "sempadan" dan "warna latar belakang".

Setiap kali pengguna mengklik butang, kami akan melaksanakan fungsi removeColor(). Dalam fungsi removeColor(), kami mengakses elemen div menggunakan nama kelas. Selepas itu, kami menggunakan kaedah removeProeprty() untuk mengalih keluar warna latar belakang daripada elemen div dengan menghantar "warna latar belakang" sebagai parameter.

Dalam output, pengguna boleh mengklik butang dan melihat bahawa warna latar belakang akan dialih keluar.

<html>
<body>
    <h3> Using the <i> removeProperty() method </i> to remove the CSS property from HTML element </h3>
    <div class = "ele" style = "width: 200px; height: 200px; background-color: red; border: 2px solid black;">
    </div>  <br>
    <button onclick = "removeColor()">
        Remove background color </button>
    <script>
        function removeColor() {
            var ele = document.querySelector(".ele");
            ele.style.removeProperty("background-color");
        }
    </script>
</html>

Salin selepas log masuk

Gunakan kaedah setProperty()

Cara kedua untuk mengalih keluar sifat CSS daripada elemen HTML ialah menggunakan kaedah setProperty(). Kaedah setProperty() digunakan untuk menetapkan sifat CSS bagi elemen HTML, tetapi apabila kami menetapkan rentetan kosong untuk sebarang sifat CSS, kami boleh mengalih keluar sifat CSS daripada elemen tersebut.

Tatabahasa

Pengguna boleh menggunakan kaedah setProperty() untuk mengalih keluar sifat CSS daripada elemen HTML dengan mengikut sintaks berikut.

ele.style.setProperty(css property, "");

Salin selepas log masuk

Dalam sintaks di atas, kami menghantar nama sifat sebagai parameter pertama dan rentetan kosong sebagai parameter kedua.

Contoh

Dalam contoh di bawah, kami telah mencipta elemen div dengan beberapa sifat CSS seperti dalam contoh pertama. Dalam fungsi removeBorder(), kami mengakses elemen div menggunakan nama kelas dan kaedah setProperty() untuk menetapkan rentetan kosong sempadan.

Dalam output kita pada mulanya boleh memerhatikan sempadan hijau dan apabila kita mengklik pada butang ia mengeluarkan sempadan.

<html>
<body>
    <h3> Using the <i> setProperty() method </i> to remove the CSS property from HTML element </h3>
    <div class = "ele" style = "width: 200px; height: 200px;background-color: blue; border: 10px solid green;">
    </div>    <br>
    <button onclick = "removeBorder()">
        Remove border </button>
    <script>
        function removeBorder() {
            var ele = document.querySelector(".ele");
            ele.style.setProperty("border", "");
        }
    </script>
</html>

Salin selepas log masuk

Alih keluar sifat CSS dengan menetapkan nilai "null"

Cara lain untuk mengalih keluar sifat CSS daripada elemen HTML ialah menetapkan nilai nol untuk sifat CSS tertentu. Kami juga boleh menetapkan nilai nol untuk mana-mana sifat CSS tertentu menggunakan kaedah setProperty() JavaScript dan kaedah CSS() JQuery. Di sini kami akan mengakses terus sifat CSS dan menetapkan nilai nol untuknya.

Tatabahasa

Pengguna boleh mengalih keluar sifat CSS daripada elemen HTML dengan menetapkan nilai nol untuk sifat CSS dengan mengikut sintaks di bawah.

element.style.css_property = null;

Salin selepas log masuk

Dalam sintaks di atas, pengguna perlu menggantikan "elemen" dan "css_property" dengan elemen HTML tertentu dan nama sifat CSS masing-masing.

Contoh

Dalam contoh di bawah, elemen div mengandungi beberapa teks dan kami menetapkan saiz fon kepada 3rem. Dalam fungsi removeSize(), kami mengakses objek "style" elemen div dan menetapkan sifat "fontSize" objek gaya kepada null.

Dalam output, pengguna boleh mengklik butang untuk menetapkan saiz fon awal teks elemen div.

<html>
<body>
    <h3> Setting the <i> null values to CSS proeprties </i> to remove the CSS property from HTML element </h3>
    <div style = "font-size: 3rem;">
        Hello World! How are you?
    </div>
    </div> <br>
    <button onclick = "removeSize()">  Remove font-size </button>
    <script>
        function removeSize() {
            let div = document.querySelector('div');
            div.style.fontSize = null;
        }
    </script>
</html>

Salin selepas log masuk

Gunakan kaedah removeAttribute()

Cara keempat untuk mengalih keluar atribut CSS daripada elemen HTML ialah menggunakan kaedah removeAttribute(). Kaedah removeAttribute() JavaScript digunakan untuk mengalih keluar atribut HTML tertentu daripada JavaScript. Dalam kes kami, kami boleh mengalih keluar atribut "gaya", yang akan mengalih keluar semua gaya daripada elemen HTML.

Tatabahasa

Pengguna boleh menggunakan kaedah removeAttribute() untuk mengalih keluar atribut CSS daripada elemen HTML dengan mengikut sintaks berikut.

ele.removeAttribute("style");

Salin selepas log masuk

Dalam sintaks di atas, kami menghantar "style" sebagai parameter kaedah remvoeAttribute() untuk mengalih keluar semua atribut CSS.

Contoh

Dalam contoh di bawah, kami telah mencipta elemen "

" yang mengandungi teks dan beberapa sifat CSS.

Fungsi

removeStyle() mengalih keluar atribut "style" daripada elemen "

" menggunakan kaedah removeAttribute().



     Using the  removeAttribute() method  to remove the CSS property from HTML element 
    
        Welcome to the tutorials point,  CSS  tutorial.
    
   

    
    <script>
        function removeStyle() {
            var ele = document.getElementsByClassName("para")[0];
            ele.removeAttribute(&quot;style&quot;);
        }
    </script>

Salin selepas log masuk

Kesimpulan

Kami mempelajari empat cara berbeza untuk mengalih keluar sifat CSS daripada elemen HTML. Dalam kaedah pertama, kami telah menggunakan kaedah removeProperty(), yang merupakan salah satu cara terbaik untuk mengalih keluar sifat CSS. Kaedah kedua dan ketiga hampir serupa dalam menetapkan nilai nol untuk sifat CSS, tetapi ia tidak mengalih keluar sifat CSS daripada elemen HTML.

Dalam kaedah terakhir, kami telah menggunakan kaedah removeAttribute() untuk mengalih keluar atribut "style", tetapi ia harus digunakan hanya apabila kami perlu mengalih keluar semua gaya daripada elemen HTML.

Semua kaedah di atas hanya berfungsi untuk mengalih keluar sifat CSS sebaris.

Atas ialah kandungan terperinci Bagaimana untuk mengalih keluar sifat CSS menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!