javascript aracılığıyla html öğe stillerini kaldırma


91

Bir öğenin satır içi stil etiketi değerini değiştirmeye çalışıyorum. Mevcut öğe şuna benzer:

`<tr class="row-even" style="background: red none repeat scroll 0% 0%; position: relative; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" id="0000ph2009-06-10s1s02">`

ve tüm bu stil öğelerini kaldırmak istiyorum, böylece satır içi stil yerine kendi sınıfına göre şekillendirilmiş. Element.style silmeyi denedim; ve element.style = null; ve element.style = ""; boşuna. Mevcut kodum bu ifadede kırılıyor. İşlevin tamamı şöyle görünür:
function unSetHighlight (index) {

if(index < 10)
index = "000" + (index);
else if (index < 100)
  index = "000" + (index);
  else if(index < 1000)
    index = "0" + (index);
    if(index >= 1000)
      index = index;

var mainElm = document.getElementById('active_playlist');
var elmIndex = "";

for(var currElm = mainElm.firstChild; currElm !== null; currElm = currElm.nextSibling){
  if(currElm.nodeType === 1){

  var elementId = currElm.getAttribute("id");

  if(elementId.match(/\b\d{4}/)){

    elmIndex = elementId.substr(0,4);


    if(elmIndex == index){
      var that = currElm;
      //that.style.background = position: relative;
      }
    }
  }
}

clearInterval(highlight);
alert("cleared Interval");
that.style.background = null;

alert("unSet highlight called");
}

clearInterval çalışır ancak uyarı hiçbir zaman tetiklenmez ve arka plan aynı kalır. Herhangi bir sorun gören var mı? Şimdiden teşekkürler...


function unSetHighlight(index){  
  alert(index);  
  if(index < 10)  
    index = "000" + (index);  
    else if (index < 100)  
      index = "000" + (index);  
      else if(index < 1000)  
        index = "0" + (index);  
        if(index >= 1000)  
          index = index;  

    var mainElm = document.getElementById('active_playlist');
    var elmIndex = "";

    for(var currElm = mainElm.firstChild; currElm !== null; currElm = currElm.nextSibling){
      if(currElm.nodeType === 1){

      var elementId = currElm.getAttribute("id");

      if(elementId.match(/\b\d{4}/)){

        elmIndex = elementId.substr(0,4);
        alert("elmIndex = " + elmIndex + "index = " + index);


        if(elmIndex === index){
          var that = currElm;
          alert("match found");
          }
        }
      }
    }

    clearInterval(highlight);
    alert("cleared Interval");
    that.removeAttribute("style");

    //that.style.position = "relative";
    //reColor();
    alert("unSet highlight called");
}

RemoveAttribute ("stil") denendi, hala şans yok. Bir darbe efekti oluşturmak için (denemek) için arka plan renkleri arasında geçiş yapmak için setInterval kullanıyorum. 4. cevabı denemek için başka stil dersleri yazmayı deneyeceğim. Başka fikrin var mı? Mevcut kodum aşağıda yayınlanmıştır ...
danwoods

Kabul olsaydı harika olurdu bu bu soru için doğru cevap olarak
Caramba

^ Yine de doğru cevap değil.
Evan Hendler

Yanıtlar:


183

sadece yapabilirsin:

element.removeAttribute("style")

51
Ya element.style.cssText = nullda aynı şeyi yapan.
mrec

4
@mrec tam olarak aynı değil, sizin durumunuzda bir öğenin hala boş styleözniteliği var
kullanıcı

5
Bu, OP'nin sorusunu yanıtlar - tüm satır içi stili ve stil sayfası kurallarına geri dönüşü kaldırın, ancak ... aynı zamanda tüm satır içi stilleri de ortadan kaldırır. Satır içi stillerden kuralları seçerek kaldırmak istiyorsanız, @ sergio'nun aşağıdaki cevabı (aslında, davidjb'nin bu cevap hakkındaki yorumu) daha kullanışlıdır.
ericsoco

72

JavaScript'te:

document.getElementById("id").style.display = null;

JQuery'de:

$("#id").css('display',null);

15
İlk kod satırı, Internet Explorer'da ya hata olarak (<9) görünür Invalid argumentve öğenin IE> = 9'da tamamen kaybolmasına neden olur getElementById("id").style.display = ''. Boş dize olan ayar , tarayıcılarda çalışıyor gibi görünür.
davidjb

2
$("#id").css('display', '');
jQuery'de

Bu beni yaklaştırdı, ancak boş değildi, ancak işe $("#id").css('display','none');
Aaron

2
ekran: hiçbirinin bu soru veya yanıtla ilgisi yoktur. Bu öğeleri saklamak için.
JasonWoof

1
Orada da CSSStyleDeclaration.removeProperty()imho boş atama daha temiz olan. Bkz developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/...
Sjeiti

12
getElementById("id").removeAttribute("style");

jQuery kullanıyorsanız o zaman

$("#id").removeClass("classname");

4
Bu iki kod parçacığı çılgınca farklı şeyler yapıyor. Sadece ilkinin soruyla ilgisi vardır.
JasonWoof

5

Sınıf özelliği birden çok stil içerebilir, böylece bunu şu şekilde belirtebilirsiniz

<tr class="row-even highlight">

ve element.className'den 'vurgulamayı' kaldırmak için dize manipülasyonu yapın

element.className=element.className.replace('hightlight','');

JQuery kullanmak, yöntemlere sahip olduğunuz için bunu daha basit hale getirir.

$("#id").addClass("highlight");
$("#id").removeClass("hightlight");

bu, vurgulamayı kolayca değiştirmenizi sağlar


Stil sayfanızda .highlight'ı tanımlamanın bir başka avantajı, yalnızca bir CSS satırını değiştirerek ve herhangi bir Javascript değişikliği yapmadan bir "vurgunun" görüntülenme şeklini tam olarak değiştirebilmenizdir. Eğer ediyorsanız değil , JQuery kullanarak ekleme ve bir sınıf çıkarmadan hala oldukça basittir: / * * / theElement.className + = 'vurgu' üzerine; / * off * / theElement.className = theElement.className.replace (/ \ b \ s * vurgu \ b /, ''); (.Element'i CSS'de tanımlayarak, her yerde de otomatik olarak aynı kalır .)
Chuck Kollars

Hata, unutulmuş olasılık sınıfı birden fazla belirtildi. Bu durumu da işlemek için, normal ifadeye 'g' bayrağını ekleyin: theElement.className = theElement.className.replace (/ \ / b \ s * vurgu \ b / g, '');
Chuck Kollars

className yerine classlist düğüm özelliğini kullanın
Shishir Arora

4

Kullanım

particular_node.classList.remove("<name-of-class>")

Yerel javascript için


2

JQuery'de kullanabilirsiniz

$(".className").attr("style","");

1

Stili tamamen kaldırmak, yalnızca NULL olarak ayarlanmıyor

document.getElementById("id").removeAttribute("style")

0

RemoveProperty'yi kaldır

var el=document.getElementById("id");


el.style.removeProperty('display')

console.log("display removed"+el.style["display"])

console.log("color "+el.style["color"])
<div id="id" style="display:block;color:red">s</div>

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.