Bagaimana saya bisa menghapus gaya yang ditambahkan dengan fungsi .css ()?


868

Saya mengubah CSS dengan jQuery dan saya ingin menghapus gaya yang saya tambahkan berdasarkan nilai input:

if(color != '000000') $("body").css("background-color", color); else // remove style ?

Bagaimana saya bisa melakukan ini?
Perhatikan bahwa garis di atas berjalan setiap kali warna dipilih menggunakan color picker (mis. Ketika mouse bergerak di atas roda warna).

Catatan kedua: Saya tidak bisa melakukan ini dengan css("background-color", "none")karena itu akan menghapus styling default dari file CSS .
Saya hanya ingin menghapus background-colorgaya sebaris yang ditambahkan oleh jQuery .


1
Kemungkinan duplikat dari Bagaimana cara
Chris Moschini

lebih baik coba addClass / removeClass berdasarkan fcuntionality Anda. Ini tidak akan mempengaruhi gaya lainnya.
Prabhakaran

Jawaban:


1333

Mengubah properti ke string kosong tampaknya melakukan pekerjaan:

$.css("background-color", "");

4
@ Baacke Sayang sekali jika "standar" yang seharusnya sudah usang dan membuang banyak waktu pengembangan. Saya memiliki sedikit simpati untuk perusahaan yang memilih untuk menggunakan perangkat lunak yang sudah ketinggalan zaman, saya tidak melihat mengapa saya harus menghabiskan waktu ekstra untuk mengembangkannya.
andrewb

33
Saya harus memihak @baacke di sini. Pelanggan kami masih memiliki persyaratan minimum resmi IE6 (!!). Masalahnya, pelanggan mereka ada di seluruh dunia, termasuk negara-negara yang kurang berkembang. "Pelanggan pelanggan" mungkin menggunakan komputer yang sangat lama untuk melakukan bisnis dengan pelanggan kami. Browser lama harus setidaknya didukung minimal atau mereka berisiko kehilangan bisnis ...
user1429080

8
Kalian tidak bisa menetapkan persyaratan dari setiap solusi yang Anda kembangkan untuk klien. Jika klien itu menginginkan atau membutuhkan dukungan untuk browser yang lebih lama, itu tugas Anda untuk menyediakannya, titik. Kalian berbicara tentang "siapa yang peduli" memberi nama buruk insinyur yang benar
Ed DeGagne

5
@ EdDeGagne - Anda harus selalu berhenti mendukung versi IE yang lebih lama. Ini meningkatkan basis kode Anda dan memotivasi pengunjung untuk tidak menggunakan IE lama. Satu-satunya hal yang sulit adalah mencari tahu kapan Anda bisa menjatuhkan dukungan. Situs web Google, memiliki banyak pengunjung, jika mereka memutuskan untuk menjatuhkan IE lama, maka Anda dapat mempercayai mereka bahwa itu adalah keputusan yang baik. Satu perusahaan bahkan mengatakan kepada penggunanya bahwa mereka membayar lebih untuk membeli setiap pengguna IE yang lama dengan komputer modern daripada mempertahankan kode IE mereka (yang persis seperti yang mereka tawarkan).
janko-m

5
Saya berhenti membaca ketika saya melihat "IE8 masih standar, bahkan pada Windows 7"
Capsule

544

Jawaban yang diterima berfungsi tetapi meninggalkan styleatribut kosong pada DOM dalam pengujian saya. Bukan masalah besar, tetapi ini menghapus semuanya:

removeAttr( 'style' );

Ini mengasumsikan Anda ingin menghapus semua styling dinamis dan kembali ke styling stylesheet.


Ini adalah ide yang bagus tapi buggy di jQuery, lihat bug yang dikirimkan: bugs.jquery.com/ticket/9500
Tosh

4
@Tosh Bug itu diselesaikan 8/25/2011
ThinkingStiff

Saya tahu tetapi setidaknya dalam versi 1.7 masih buggy, saya belum menguji 1,8
Tosh

7
Ini akan menghapus semua properti lain di atribut style juga. Jadi pilihlah dengan bijak.
codingrhythm

1
Ini pintar! jawaban yang diterima tidak akan berfungsi dalam situasi di mana gaya inline yang dibuat oleh jquery harus menimpa gaya css, tetapi metode ini berfungsi dengan baik dalam semua situasi.
Farzad YZ

170

Ada beberapa cara untuk menghapus properti CSS menggunakan jQuery:

1. Mengatur properti CSS ke nilai default (awal)

.css("background-color", "transparent")

Lihat nilai awal untuk properti CSS di MDN . Di sini nilai standarnya transparent. Anda juga dapat menggunakan inheritbeberapa properti CSS untuk mewarisi atribut dari induknya. Di CSS3 / CSS4, Anda juga dapat menggunakan initial, revertatau unsettetapi kata kunci ini mungkin memiliki dukungan browser yang terbatas.

2. Menghapus properti CSS

String kosong menghapus properti CSS, yaitu

.css("background-color","")

Namun berhati-hatilah, seperti yang ditentukan dalam dokumentasi jQuery .css () , ini menghapus properti tetapi memiliki masalah kompatibilitas dengan IE8 untuk properti steno CSS tertentu, termasuk latar belakang .

Menyetel nilai properti style ke string kosong - mis. $ ('# Mydiv'). Css ('color', '') - menghapus properti itu dari elemen jika sudah diterapkan secara langsung, baik dalam gaya HTML atribut, melalui metode .css () jQuery, atau melalui manipulasi DOM langsung dari properti style. Namun, itu tidak menghapus gaya yang telah diterapkan dengan aturan CSS di stylesheet atau elemen. Peringatan: satu pengecualian penting adalah bahwa, untuk IE 8 dan di bawahnya, menghapus properti singkatan seperti perbatasan atau latar belakang akan menghapus gaya itu sepenuhnya dari elemen, terlepas dari apa yang diatur dalam stylesheet atau elemen .

3. Menghapus seluruh gaya elemen

.removeAttr("style")

49

Saya punya cara untuk menghapus atribut gaya dengan JavaScript murni hanya agar Anda tahu cara JavaScript murni

var bodyStyle = document.body.style;
if (bodyStyle.removeAttribute)
    bodyStyle.removeAttribute('background-color');
else        
    bodyStyle.removeProperty('background-color');

11
Lelaki itu sudah menggunakan jQuery ... mengapa repot menerapkan kembali metode lintas-browser!?!?
billy

32
karena jquery bukan segalanya, karena dia atau mungkin saya harus mengatakan kita sebagai pengembang harus tahu apa arti kompatibilitas dan bagaimana melakukan hal-hal seperti itu dengan bahasa inti seperti JavaScript, mungkin ini teori saya yang saya buat sudah kerangka kerja saya sendiri dari pengetahuan saya tentang inti JavaScript saya menolak untuk menggunakan hal-hal lain saya memiliki konsep saya sendiri dan cara berpikir saya :) dan omong-omong terima kasih untuk (-) saya hanya perlu menjadi nilai tambah :) dan juga omong-omong orang itu bukan pria yang dia bernama Alex
Marwan

1
Saya hanya ingin mencatat bahwa Anda tidak harus memeriksa dokumen. Semua jika Anda tidak menggunakannya. Mungkin Anda akan memeriksanya seperti ini: if (elm.style.removeProperty) {elm.style.removeProperty (propertyName); } lain jika (elm.style.removeAttribute) {elm.style.removeAttribute (atributName); }
Richard

baik Anda benar harus seperti ini jika (navigator.appName == "Microsoft Internet Explorer") document.body.style.removeAttribute ('background-color'); selain itu document.body.style.removeProperty ('background-color'); dan di sisi lain solusi Anda juga benar :) terima kasih atas catatan Anda
Marwan

9
Tidak, Anda pasti harus memeriksa apakah fungsi itu ada daripada memeriksa browser. Bagaimana jika MS memutuskan untuk mengubah nama fungsi di versi IE berikutnya? Apakah Anda kemudian pergi dan memeriksa versi IE juga?
j03w


19

salah satu dari fungsi jQuery ini harus berfungsi:

$("#element").removeAttr("style");
$("#element").removeAttr("background-color") 

22
Untuk menghapus hanya satu properti css:var cssObject = $('selector').prop('style'); cssObject.removeProperty('background-color');
ilgaar

igaar - solusi Anda adalah yang paling rapi. Saya meletakkannya dalam loop '.each' untuk tumpukan sel tabel yang memiliki "display: none" yang harus pergi tetapi dengan properti lain yang harus tetap. Ini bekerja dengan sempurna, hanya menghapus layar: tidak ada dan meninggalkan sisanya.
Rob Von Nesselrode

9

Hanya menggunakan:

$('.tag-class').removeAttr('style');

atau

$('#tag-id').removeAttr('style');

Ini juga akan menghapus gaya lain yang ditambahkan sebaris, bukan hanya warna.
LongInt

7

Bagaimana dengan sesuatu seperti:

var myCss = $(element).attr('css');
myCss = myCss.replace('background-color: '+$(element).css('background-color')+';', '');
if(myCss == '') {
  $(element).removeAttr('css');
} else {
  $(element).attr('css', myCss);
}

Saya suka yang ini! Anda menghapus properti yang ditentukan dan tidak ada yang lain.
Joel

7

Gunakan Plugin saya:

$.fn.removeCss=function(all){
        if(all===true){
            $(this).removeAttr('class');
        }
        return $(this).removeAttr('style')
    }

Untuk kasus Anda, Gunakan sebagai berikut:

$(<mySelector>).removeCss();

atau

$(<mySelector>).removeCss(false);

jika Anda ingin menghapus juga CSS yang ditentukan di kelasnya:

$(<mySelector>).removeCss(true);

$(this).removeAttrberlebihan dan this.removeAttrharus cukup.
Emile Bergeron

Apakah removeAttr akan menghapus juga classattr? Saya rasa tidak
Abdennour TOUMI

Saya berbicara tentang bagian removeAttrdalam plugin Anda, di mana thissudah ada elemen jQuery. $(this)berlebihan.
Emile Bergeron

2
AH! OK OK .. @EmileBergeron, jquery lama menyediakan thissebagai HTMLElementcontoh dipetakan ke elemen jQuery ... Seperti yang Anda lihat, jawaban saya sudah tua ... itu sebabnya .. pokoknya, saya bisa memberi tahu Anda mengapa mereka mengubahnya, mereka melakukan itu karena fungsi panah yang muncul baru di ES6. .. dan thismenjadi tidak berguna dan digantikan olehevent.currentTarget
Abdennour TOUMI

1
Cukup adil! ;) Lucu umur 3 tahun di dunia JS.
Emile Bergeron

7

Coba ini:

$('#divID').css({"background":"none"});// remove existing

$('#divID').css({"background":"#bada55"});// add new color here.

Terima kasih


Satu-satunya masalah dengan "hapus yang ada" adalah bahwa itu juga akan menimpa latar stylesheet jika ada satu set.
Jtbs

6

Jika Anda menggunakan gaya CSS, Anda dapat menggunakan:

$("#element").css("background-color","none"); 

lalu ganti dengan:

$("#element").css("background-color", color);

Jika Anda tidak menggunakan gaya CSS dan memiliki atribut dalam elemen HTML, Anda dapat menggunakan:

$("#element").attr("style.background-color",color);

6

2018

ada API asli untuk itu

element.style.removeProperty(propery)


2

Mengapa tidak membuat gaya yang ingin Anda hapus dari kelas CSS? Sekarang Anda dapat menggunakan:.removeClass() . Ini juga membuka kemungkinan menggunakan:.toggleClass()

(hapus kelas jika ada, dan tambahkan jika tidak.)

Menambah / menghapus kelas juga kurang membingungkan untuk diubah / dipecahkan ketika berhadapan dengan masalah tata letak (sebagai lawan mencoba mencari tahu mengapa gaya tertentu menghilang.)


2
let el = document.querySelector(element)
let styles = el.getAttribute('style')

el.setAttribute('style', styles.replace('width: 100%', ''))

1

Ini lebih kompleks daripada beberapa solusi lain, tetapi mungkin menawarkan lebih banyak fleksibilitas dalam skenario:

1) Buat definisi kelas untuk mengisolasi (merangkum) gaya yang ingin Anda terapkan / hapus secara selektif. Itu bisa kosong (dan untuk kasus ini, mungkin harus):

.myColor {}

2) gunakan kode ini, berdasarkan http://jsfiddle.net/kdp5V/167/ dari jawaban ini oleh gilly3 :

function changeCSSRule(styleSelector,property,value) {
    for (var ssIdx = 0; ssIdx < document.styleSheets.length; ssIdx++) {
        var ss = document.styleSheets[ssIdx];
        var rules = ss.cssRules || ss.rules;
        if(rules){
            for (var ruleIdx = 0; ruleIdx < rules.length; ruleIdx++) {
                var rule = rules[ruleIdx];
                if (rule.selectorText == styleSelector) {
                    if(typeof value == 'undefined' || !value){
                        rule.style.removeProperty(property);
                    } else {
                        rule.style.setProperty(property,value);
                    }
                    return; // stops at FIRST occurrence of this styleSelector
                }
            }
        }
    }
}

Contoh penggunaan: http://jsfiddle.net/qvkwhtow/

Peringatan:

  • Tidak diuji secara ekstensif.
  • Tidak dapat menyertakan ! Arahan penting atau lainnya dalam nilai baru. Arahan yang ada seperti itu akan hilang melalui manipulasi ini.
  • Hanya perubahan yang pertama kali ditemukan kemunculan styleSelector. Tidak menambah atau menghapus seluruh gaya, tetapi ini bisa dilakukan dengan sesuatu yang lebih rumit.
  • Nilai yang tidak valid / tidak dapat digunakan akan diabaikan atau melempar kesalahan.
  • Di Chrome (setidaknya), aturan CSS non-lokal (seperti di situs) tidak diekspos melalui objek document.styleSheets, jadi ini tidak akan berfungsi pada mereka. Orang harus menambahkan override lokal dan memanipulasi itu, dengan mengingat perilaku "pertama kali ditemukan" dari kode ini.
  • document.styleSheets tidak terlalu ramah untuk manipulasi secara umum, jangan berharap ini bekerja untuk penggunaan yang agresif.

Mengisolasi gaya dengan cara ini adalah tentang apa itu CSS, bahkan jika memanipulasi bukan. Memanipulasi aturan CSS BUKAN tentang jQuery, jQuery memanipulasi elemen DOM, dan menggunakan penyeleksi CSS untuk melakukannya.


1

Sederhana murah dalam pengembangan web. Saya sarankan menggunakan string kosong saat menghapus gaya tertentu

$(element).style.attr = '  ';

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.