suppression des styles d'élément html via javascript


90

J'essaye de remplacer la valeur de balise de style en ligne d'un élément. L'élément actuel ressemble à ceci:

`<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">`

et j'aimerais supprimer tous ces éléments de style afin qu'ils soient stylisés par leur classe plutôt que par leur style en ligne. J'ai essayé de supprimer element.style; et element.style = null; et element.style = ""; en vain. Mon code actuel rompt à ces instructions. La fonction entière ressemble à:
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 fonctionne mais l'alerte ne se déclenche jamais et l'arrière-plan reste le même. Quelqu'un voit-il des problèmes? Merci d'avance...


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

J'ai essayé removeAttribute ("style"), toujours pas de chance. J'utilise setInterval pour parcourir les couleurs d'arrière-plan pour (essayer de) créer un effet d'impulsion. Je vais essayer d'écrire d'autres classes de style pour essayer la réponse 4. Avez-vous d'autres idées? Mon code actuel est affiché ci-dessous ...
danwoods

ce serait génial si vous acceptiez cela comme la bonne réponse à cette question
caramba

^ Ce n'est pas la bonne réponse, cependant.
Evan Hendler

Réponses:


182

vous pouvez simplement faire:

element.removeAttribute("style")

51
Ou element.style.cssText = null, qui fait à peu près la même chose.
mrec

3
@mrec n'est pas exactement le même, dans votre cas, un élément a toujours un styleattribut vide
utilisateur

5
Cela répond à la question du PO - supprimer tous les styles en ligne et revenir aux règles de feuille de style, mais ... cela supprime également tous les styles en ligne. Si vous souhaitez supprimer sélectivement les règles des styles en ligne, la réponse de @ sergio ci-dessous (en fait, le commentaire de davidjb sur cette réponse) est plus utile.
ericsoco

71

En JavaScript:

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

Dans jQuery:

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

15
La première ligne de code semble indiquer une erreur dans Internet Explorer (<9) avec Invalid argumentou faire disparaître complètement l'élément dans IE> = 9. Le paramètre getElementById("id").style.display = '', étant la chaîne vide, semble fonctionner dans tous les navigateurs.
davidjb

2
dans jQuery, la bonne façon de supprimer un style est$("#id").css('display', '');
Oiva Eskola

Cela m'a rapproché, mais ce n'était pas nul, mais «aucun» qui a fonctionné, par exemple$("#id").css('display','none');
Aaron

2
affichage: aucun n'a rien à voir avec cette question ou cette réponse. C'est pour cacher des éléments.
JasonWoof

1
Il y a aussi CSSStyleDeclaration.removeProperty()qui à mon humble avis est beaucoup plus propre qu'une affectation nulle. Voir developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/…
Sjeiti

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

si vous utilisez jQuery alors

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

4
Ces deux extraits de code font des choses très différentes. Seul le premier a quelque chose à voir avec la question.
JasonWoof

5

L'attribut class peut contenir plusieurs styles, vous pouvez donc le spécifier comme

<tr class="row-even highlight">

et faites une manipulation de chaîne pour supprimer 'highlight' de element.className

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

L'utilisation de jQuery rendrait cela plus simple car vous avez les méthodes

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

cela vous permettrait de basculer facilement la mise en évidence


Un autre avantage de la définition de .highlight dans votre feuille de style est que vous pouvez modifier exactement la façon dont un "surlignage" est affiché en changeant simplement une ligne de CSS et en n'apportant aucun changement Javascript. Si vous n'utilisez pas JQuery, ajouter et supprimer une classe est encore assez simple: / * on * / theElement.className + = 'highlight'; / * off * / theElement.className = theElement.className.replace (/ \ b \ s * highlight \ b /, ''); (En définissant .element dans CSS, il reste automatiquement le même partout, aussi.)
Chuck Kollars

Oups, la classe de possibilité oubliée est spécifiée plus d'une fois. Pour gérer ce cas également, ajoutez l'indicateur 'g' à l'expression régulière: theElement.className = theElement.className.replace (/ \ / b \ s * highlight \ b / g, '');
Chuck Kollars

utiliser la propriété de nœud de liste de classes au lieu de className
Shishir Arora

4

Utilisation

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

Pour javascript natif


2

Dans jQuery, vous pouvez utiliser

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

1

Suppression complète du style, non seulement défini sur NULL

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

0

Supprimer removeProperty

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>

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.