2009-06-24 32 views
47

Estoy tratando de reemplazar el valor de etiqueta de estilo en línea de un elemento. El elemento actual es el siguiente:eliminación de estilos de elemento html a través de javascript

`<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 quitar todas esas cosas estilo para que se labró por 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. La función entera se parece a:
función unSetHighlight (índice) {

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

la clearInterval funciona, pero la alerta nunca se dispara y el fondo sigue siendo el mismo. ¿Alguien ve algún problema? Gracias de antemano ...


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

Probado removeAttribute ("estilo"), sigue sin suerte. Estoy usando setInterval para recorrer los colores de fondo para (intentar) crear un efecto de pulso. Trataré de escribir algunas otras clases de estilo para intentar responder 4. ¿Alguna otra idea? Mi código actual se publica a continuación ... – danwoods

+0

sería genial si aceptaras [this] (http://stackoverflow.com/a/1040439/2008111) como la respuesta correcta a esta pregunta – caramba

+0

^No es la respuesta correcta , aunque. –

Respuesta

106

sólo se puede hacer: element.removeAttribute("style")

+3

elegante al MAX – sidonaldson

+26

O 'element.style.cssText = null', que hace más de lo mismo. – mrec

+1

@mrec no es exactamente lo mismo, en su caso un elemento todavía tiene el atributo 'style' vacío – user

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

si está utilizando jQuery entonces

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

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

+0

@JasonWoof Estoy de acuerdo. –

4

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

<tr class="row-even highlight"> 

y hacer la manipulación de cadenas para eliminar 'destacado' del element.className

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

Usando jQuery haría que este sencillo y cuando tenga los métodos

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

que permitiría para alternar resaltando fácilmente

+0

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 de Javascript. Si no estás usando JQuery, agregar y eliminar una clase sigue siendo bastante simple:/* on */theElement.className + = 'highlight';/* off */theElement.className = theElement.className.replace (/ \ b \ s * highlight \ b /, ''); (Al definir .element en CSS, también se queda automáticamente el _same_ en todas partes). –

+0

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

+0

use la propiedad de nodo classlist en lugar de className –

44

En JavaScript:

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

En jQuery:

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

La primera línea de código aparece a cualquiera de los errores en Internet Explorer (<9) con' ' Invalid argument'' o hacer que el elemento desaparezca por completo en IE> = 9. Configuración de '' getElementById ("id"). Style.display = '' '', al ser 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', '');' –

+0

Esto me acercó, pero no fue nulo, pero 'ninguno' funcionó , p.ej '$ (" # id "). css ('display', 'none');' – Aaron

1

Uso

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

JavaScript nativo

Cuestiones relacionadas