cara menghapus properti css menggunakan javascript?

195

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?

javascript  css 
— duduk
sumber
3
Tolong jelaskan: apakah Anda mencoba untuk menghapus kelas dari beberapa elemen, atau atribut dari beberapa elemen?
— Jan Hančič
1
Maaf untuk itu, bukan kelas, atribut untuk elemen.
— Duduk
mengapa downvote? itu pertanyaan yang cukup layak bukan?
— Roland Bouman
2
Hai sat, saya tidak mengerti - mengapa Anda menandai balasan orang naif sebagai "jawaban yang diterima"? Maksud saya, solusinya bagus jika Anda ingin menemukan elemen berdasarkan kelas tetapi segala sesuatu dalam pertanyaan Anda menunjukkan Anda sedang mencari metode untuk mengubah efek pengaturan properti gaya lokal. Tentunya jawaban saya cocok dengan masalahnya? Mungkin saya salah mengerti pertanyaan Anda?
— Roland Bouman
1
@RolandBouman sebenarnya jawaban yang diterima harus diubah menjadi yang dari Edvinas Ilčenko karena itu menjawab apa yang diminta tentang penghapusan daripada mengubah ke default. Jawaban Anda masih memiliki nilai jadi saya telah mengeditnya untuk menjelaskan perbedaannya.
— whitneyland

Jawaban:

187

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.

— Roland Bouman
sumber
... bersama dengan CSS pengguna dan gaya default browser.
— Quentin
Saya memahami OP yang berarti bahwa mereka ingin membuatnya seolah-olah mereka belum menetapkan properti gaya elemen, yang persis apa yang Anda berikan. Saya mencoba menggunakan el.style.removeProperty ('zoom'); (atau 'mengisi', sebenarnya, dalam kasus saya) yang tampaknya melakukan hal yang sama di IE, dan diabaikan oleh browser lain. Untuk beberapa alasan saya terkejut menemukan bahwa pengaturan ke string kosong memiliki efek yang sama dan tampaknya berfungsi pada semua (versi terbaru) browser.
— Shavais
Apakah perilaku ini ditentukan di mana saja dalam standar? Saya tidak dapat menemukannya :-(
— Oliver Joseph Ash
@OliverJosephAsh ya itu sudah didokumentasikan, lihat jawaban ini di bawah stackoverflow.com/a/7901886/700206
— whitneyland
10

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.

— james.garriss
sumber
Ini sepertinya sangat rapuh. Apakah itu tidak akan pecah setiap kali indeks Anda berubah?
— Casey Rodarmor
Ya. Itulah yang dikatakan peringatan # 1.
— james.garriss
Chrome 26 saya tidak memiliki CSSStyleRule.prototype.removeProperty= (Faktanya CSSStyleRuletidak memiliki metode. = (
— Rudie
CSSStyleSheet.prototype.removeRuleuntuk menyelamatkan.
— Rudie
@ Rudie, bukan CSSStyleSheet.prototype.deleteRule?
— roka
7 
element.style.height = null;

keluaran:

<div style="height:100px;"> 
// results: 
<div style="">
— T.Todua
sumber
Tampaknya pengaturan gaya ke nol tidak berfungsi di IE11.
— MaximeW
1
Mengapa seseorang harus memperhatikan IEbrowser? Saya sengaja mengabaikannya selama bertahun-tahun.
— T.Todua
4

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.

— kenaifan
sumber
5
Ya ada. Memodifikasi stylesheet secara pemrograman meskipun javascript tidak sulit. Ini berfungsi lintas-browser dengan kinerja luar biasa dan sangat masuk akal ketika mengubah satu properti yang seharusnya sama pada banyak elemen. Seperti halnya Jan 2010 juga. Berikut adalah contoh singkat: stackoverflow.com/questions/14927706/…
— Clox
Clox: Menambahkan stylesheet yang menimpa beberapa properti secara terprogram - tentu saja! Memodifikasi yang sudah dimuat - Belum pernah dengar.
— naivists
Apakah ini berarti css () daripada attr (). Atau mungkin attr () di IE?
— Alex KeySmith
itu seharusnya benar css, bukan attr, kamu benar.
— naivists
0

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

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

— Mat
sumber
1
Pertanyaannya adalah bagaimana menghapus suatu gaya, jawaban ini akan menghancurkan semua gaya yang ada dan menggantinya dengan satu entri baru.
— whitneyland
0

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.

— MaxOvrdrv
sumber
-3

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)/) )
— thejustv
sumber
1
Pertanyaannya adalah bagaimana menghapus gaya, jawaban ini tidak ada hubungannya dengan itu.
— whitneyland
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.