eliminar estilos de elementos html a través de javascript

90

Estoy intentando reemplazar el valor de la etiqueta de estilo en línea de un elemento. El elemento actual se ve así:

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

y me gustaría eliminar todas esas cosas de estilo para que tenga el estilo de su clase en lugar de su estilo en línea. He intentado eliminar element.style; y element.style = null; y element.style = ""; en vano. Mi código actual se rompe en esta declaración. Toda la función se ve así:
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 funciona, pero la alerta nunca se activa y el fondo permanece igual. ¿Alguien ve algún problema? Gracias por adelantado...

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

— danwoods
fuente

Intenté removeAttribute ("estilo"), pero no tuve suerte. Estoy usando setInterval para recorrer los colores de fondo para (intentar) crear un efecto de pulso. Intentaré escribir otras clases de estilo para intentar la respuesta 4. ¿Alguna otra idea? Mi código actual se publica a continuación ...

— danwoods

Sería increíble si aceptara esto como la respuesta correcta a esta pregunta

— caramba

^ Sin embargo, no es la respuesta correcta.

— Evan Hendler

182

solo puedes hacer:

element.removeAttribute("style")

— nube
fuente

51

O element.style.cssText = null, que hace lo mismo.

— mrec

3

@mrec no es exactamente el mismo, en su caso, un elemento todavía tiene un styleatributo vacío

— usuario

5

Esto responde a la pregunta del OP: elimine todo el estilo en línea y vuelva a las reglas de la hoja de estilo, pero ... también elimina todos los estilos en línea. Si desea eliminar selectivamente las reglas de los estilos en línea, la respuesta de @ sergio a continuación (en realidad, el comentario de davidjb sobre esa respuesta) es más útil.

— ericsoco

71

En JavaScript:

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

En jQuery:

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

— Sergio
fuente

15

La primera línea de código parece tener un error en Internet Explorer (<9) con Invalid argumento hacer que el elemento desaparezca por completo en IE> = 9. La configuración getElementById("id").style.display = '', que es la cadena vacía, parece funcionar en todos los navegadores.

— davidjb

2

en jQuery, la forma correcta de eliminar un estilo es$("#id").css('display', '');

— Oiva Eskola

Esto me acercó, pero no fue nulo, sino 'ninguno' que funcionó, por ejemplo$("#id").css('display','none');

— Aaron

2

display: none no tiene nada que ver con esta pregunta o respuesta. Eso es para ocultar elementos.

— JasonWoof

1

También hay algo CSSStyleDeclaration.removeProperty()que en mi humilde opinión es mucho más limpio que una asignación nula. Ver developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/…

— Sjeiti

13

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

si estás usando jQuery entonces

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

— Rony
fuente

4

Esos dos fragmentos de código hacen cosas tremendamente diferentes. Solo el primero tiene algo que ver con la pregunta.

— JasonWoof

5

El atributo de clase puede contener varios estilos, por lo que puede especificarlo como

<tr class="row-even highlight">

y realice la manipulación de cadenas para eliminar 'resaltar' de element.className

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

Usar jQuery haría esto más simple ya que tiene los métodos

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

que le permitiría alternar el resaltado fácilmente

— brecha
fuente

Otra ventaja de definir .highlight en su hoja de estilo es que puede cambiar exactamente cómo se muestra un "resaltado" simplemente cambiando una línea de CSS y sin hacer ningún cambio en Javascript. Si estás no usando jQuery, agregar y quitar una clase sigue siendo bastante simple: / * en * / theElement.className + = 'destacado'; / * desactivado * / theElement.className = theElement.className.replace (/ \ b \ s * resaltar \ b /, ''); (Al definir .element en CSS, automáticamente permanece igual en todas partes.)

— Chuck Kollars

Vaya, la clase de posibilidad olvidada se especifica más de una vez. Para manejar ese caso también, agregue la marca 'g' a la expresión regular: theElement.className = theElement.className.replace (/ \ / b \ s * resaltar \ b / g, '');

— Chuck Kollars

use la propiedad del nodo classlist en lugar de className

— Shishir Arora

4

Utilizar

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

Para javascript nativo

— Shishir Arora
fuente

2

En jQuery, puede usar

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

— Almhar
fuente

1

Elimina completamente el estilo, no solo se establece en NULL

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

— Vitalicus
fuente

0

Eliminar 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>

Expandir fragmento

— ßãlãjî
fuente