Javascript kullanarak css özelliği nasıl kaldırılır?

195

kullanarak bir öğenin CSS özelliğini kaldırmak mümkün mü? Örneğin div.style.zoom = 1.2, şimdi zoom özelliğini JavaScript ile kaldırmak istiyorum?

javascript css

— oturdu
kaynak

3

Lütfen açıklığa kavuşturun: Bir öğeyi bir öğeden mi, yoksa bir öğeden bir özniteliği mi çıkarmaya çalışıyorsunuz?

— Jan Hančič

1

Bunun için üzgünüm, bir öğe için bir sınıf değil, bir özellik.

— oturdu

neden değer düşüklüğü? yeterince iyi bir soru değil mi?

— Roland Bouman

2

Merhaba, anlamıyorum - neden naivistlerin cevabını "kabul edilmiş cevap" olarak işaretlediniz? Yani, çözümü sınıfta bulmak istediğinizde çözümü iyidir, ancak sorunuzdaki her şey yerel stilin bir özelliğini ayarlama efektini değiştirmek için bir yöntem aradığınızı gösterir. Elbette cevabım soruna daha iyi uyuyor mu? Belki de sorunuzu yanlış anladım?

— Roland Bouman

1

@RolandBouman aslında kabul edilen cevap Edvinas Ilčenko olarak değiştirilmelidir, çünkü varsayılan olarak değiştirmek yerine kaldırma hakkında sorulanlara hitap eder. Cevabınızın hala bir değeri var, bu yüzden ayrımı netleştirmek için düzenledim.

— whitneyland

187

İki seçeneğiniz var:

SEÇENEK 1:

RemoveProperty yöntemini kullanabilirsiniz . Bir öğeden bir stil kaldırır.

el.style.removeProperty('zoom');

SEÇENEK 2:

Varsayılan değere ayarlayabilirsiniz:

el.style.zoom = "";

Etkili yakınlaştırma artık stil sayfalarında (bağlantı ve stil etiketleri aracılığıyla) tanımlanan tanımlardan sonra olacaklardır. Dolayısıyla bu sözdizimi yalnızca bu öğenin yerel stilini değiştirir.

— Roland Bouman
kaynak

… Kullanıcı CSS ve tarayıcı varsayılan stilleri ile birlikte.

— Quentin

OP'yi, tam olarak sağladığınız şey, öğenin style özelliğini ayarlamıyormuş gibi yapmak istediklerini anlamıştım. El.style.removeProperty ('zoom') kullanarak denedim; (veya "doldur", aslında benim durumumda) IE'de aynı şeyi yapıyor gibi görünüyor ve diğer tarayıcılar tarafından yok sayılıyor. Bazı nedenlerden dolayı, boş bir dizeye ayarlamanın aynı etkiye sahip olduğunu ve tüm tarayıcıların (son sürümlerinde) çalıştığını görünce şaşırdım.

— Shavais

Bu davranış standartta herhangi bir yerde belirtilmiş mi? Bulamıyorum :-(

— Oliver Joseph Ash

@OliverJosephAsh evet belgelenmiştir, aşağıdaki cevaba bakınız stackoverflow.com/a/7901886/700206

— whitneyland

120

removeProperty , öğeden bir stil kaldırır.

Misal:

div.style.removeProperty ( 'yakınlaştırın');

MDN belge sayfası:
CSSStyleDeclaration.removeProperty

— Edvinas Ilčenko
kaynak

25

div.style.removeProperty('zoom');

— joe
kaynak

10

StyleSheets nesnesini kullanabilirsiniz:

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

Uyarı # 1: Stil sayfanızın dizinini ve kuralınızın dizinini bilmeniz gerekir.

Uyarı # 2: Bu nesne tarayıcılar tarafından tutarsız bir şekilde uygulanır; birinde işe yarayan diğerlerinde işe yaramayabilir.

— james.garriss
kaynak

Bu gerçekten kırılgan görünüyor. Endeksleriniz değiştiğinde bozulmayacak mı?

— Casey Rodarmor

Evet. 1 numaralı uyarı tam olarak bunu söylüyor.

— james.garriss

Chrome CSSStyleRule.prototype.removePropertyCSSStyleRule

— 26'mda

CSSStyleSheet.prototype.removeRulekurtarmak için.

— Rudie

@Rudie, değil mi CSSStyleSheet.prototype.deleteRule?

— roka

7

element.style.height = null;

çıktı:

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

— T.Todua
kaynak

IE11'de stili null değerine ayarlamak işe yaramıyor gibi görünüyor.

— MaximeW

1

Neden birisi IEtarayıcılarla ilgilenmeli ? Onları yıllarca kasıtlı olarak görmezden geliyorum.

— T.Todua

4

Bu sınıfa sahip tüm öğeleri bulmayı ve "zoom" özelliğini "hiçbir şeye" ayarlamayı deneyebilirsiniz.

JQuery javascript kütüphanesi kullanıyorsanız, bunu $(".the_required_class").css("zoom","")

Düzenleme: Bu açıklama, 2010 yılından bu yana gerçekten mümkün olmuştur bir yorum ve diğer cevaplara işaret edildiği gibi, doğru olmadığı ortaya çıktı.

Yanlış: JavaScript'te stil sayfalarını değiştirmenin genel olarak bilinen bir yolu yoktur.

— naivists
kaynak

5

Evet var. Javascript zor olmasa da stil sayfalarını programlı olarak değiştirmek. Çapraz tarayıcıyla mükemmel performansla çalışır ve bir grup öğede aynı olması gereken bir özelliği değiştirirken gerçekten mantıklıdır. Durum Ocak 2010'da olduğu gibi. Kısa bir örnek: stackoverflow.com/questions/14927706/…

— Clox

Clox: Bazı özellikleri programlı olarak geçersiz kılan stil sayfaları ekleme - tabii ki! Zaten yüklü olanları değiştirmek - Duymadım.

— naivistler

Attr () yerine css () anlamına mı geliyor? Yoksa IE'de belki attr ()?

— Alex KeySmith

aslında olması gerektiği cssdeğil, attrhaklısın.

— naivistler

1

Bunu jQuery'de şunu da yapabilirsiniz: $(selector).css("zoom", "")

— TryingToImprove
kaynak

0

Bu, hile yapmalıdır - yakınlaştırma için satır içi stilini normale ayarlayın:

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

— Mat
kaynak

1

Soru, bir stilin nasıl kaldırılacağıydı, bu cevap mevcut tüm stilleri yok edecek ve bunları yeni bir girişle değiştirecektir.

— whitneyland

0

aslında, zaten mülk biliyorsanız, bu yapacak ...

Örneğin:

<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;
    }

Bunun yalnızca satır içi stiller için çalıştığını unutmayın ... bir sınıf veya benzeri bir şeyle belirttiğiniz stiller için değil ...

Diğer not: bu değiştirme ifadesindeki bazı karakterlerden kaçmanız gerekebilir, ancak fikri anlarsınız.

— MaxOvrdrv
kaynak

-3

Bir öğenin tüm sınıflarını değiştirmek için:

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

Bir öğeye ek sınıf eklemek için:

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

Bir öğenin zaten bir öğeye uygulanıp uygulanmadığını kontrol etmek için:

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

— thejustv
kaynak

1

Soru, bir stilin nasıl kaldırılacağıydı, bu cevabın bununla hiçbir ilgisi yok.

— whitneyland