cara menghapus properti css menggunakan javascript?

apakah mungkin untuk menghapus properti CSS dari suatu elemen menggunakan JavaScript? misal sudah div.style.zoom = 1.2, sekarang saya ingin menghapus properti zoom melalui JavaScript?

Anda memiliki dua opsi:

PILIHAN 1:

Anda dapat menggunakan metode removeProperty . Ini akan menghapus gaya dari suatu elemen.

el.style.removeProperty('zoom');

PILIHAN 2:

Anda dapat mengaturnya ke nilai default:

el.style.zoom = "";

Zoom efektif sekarang akan menjadi apa pun yang mengikuti dari definisi yang ditetapkan dalam lembar gaya (melalui tautan dan tag gaya). Jadi sintaks ini hanya akan mengubah gaya lokal elemen ini.

removeProperty akan menghapus gaya dari suatu elemen.

Contoh:

div.style.removeProperty ('zoom');

Halaman dokumentasi MDN:
CSSStyleDeclaration.removeProperty

div.style.removeProperty('zoom');

Anda bisa menggunakan objek styleSheets:

document.styleSheets[0].cssRules[0].style.removeProperty("zoom");

Peringatan # 1: Anda harus tahu indeks stylesheet Anda dan indeks aturan Anda.

Peringatan # 2: Objek ini diimplementasikan secara tidak konsisten oleh browser; apa yang berhasil di satu mungkin tidak bekerja di yang lain.

element.style.height = null;

keluaran:

<div style="height:100px;"> 
// results: 
<div style="">

Anda dapat mencoba menemukan semua elemen yang memiliki kelas ini dan mengatur properti "zoom" menjadi "nothing".

Jika Anda menggunakan perpustakaan javascript jQuery, Anda dapat melakukannya dengan $(".the_required_class").css("zoom","")

Sunting: Dihapus pernyataan ini karena ternyata tidak benar, seperti yang ditunjukkan dalam komentar dan jawaban lain itu memang mungkin terjadi sejak 2010.

Salah: tidak ada cara yang diketahui secara umum untuk memodifikasi stylesheet dari JavaScript.

Anda juga dapat melakukan ini di jQuery dengan mengatakan $(selector).css("zoom", "")

Ini harus melakukan trik - mengatur gaya inline menjadi normal untuk zoom:

$ ('div'). attr ("style", "zoom: normal;");

sebenarnya, jika Anda sudah tahu properti itu, ini akan melakukannya ...

sebagai contoh:

<a href="test.html" style="color:white;zoom:1.2" id="MyLink"></a>

    var txt = "";
    txt = getStyle(InterTabLink);
    setStyle(InterTabLink, txt.replace("zoom\:1\.2\;","");

    function setStyle(element, styleText){
        if(element.style.setAttribute)
            element.style.setAttribute("cssText", styleText );
        else
            element.setAttribute("style", styleText );
    }

    /* getStyle function */
    function getStyle(element){
        var styleText = element.getAttribute('style');
        if(styleText == null)
            return "";
        if (typeof styleText == 'string') // !IE
            return styleText;
        else  // IE
            return styleText.cssText;
    } 

Perhatikan bahwa ini hanya berfungsi untuk gaya sebaris ... bukan gaya yang Anda tentukan melalui kelas atau sesuatu seperti itu ...

Catatan lain: Anda mungkin harus melarikan diri beberapa karakter dalam pernyataan ganti itu, tetapi Anda mendapatkan idenya.

Untuk mengubah semua kelas untuk suatu elemen:

document.getElementById("ElementID").className = "CssClass";

Untuk menambahkan kelas tambahan ke elemen:

document.getElementById("ElementID").className += " CssClass";

Untuk memeriksa apakah kelas sudah diterapkan ke elemen:

if ( document.getElementById("ElementID").className.match(/(?:^|\s)CssClass(?!\S)/) )