Rimuovere i css incorporati di elementi HTML

Question

Sto usando wordpress 3.5 e creare menu con sottomenu. E 'strutturato in questo modo:

<ul class="menu"> 
    <li id="menu1">Menu 1</li> 
    <li id="menu2">Menu 2</li> 
    <li id="menu3" style="z-index:100;"> 
     Menu 3 
     <ul class="submenu"> 
      <li id="submenu1">submenu1</li> 
      <li id="submenu2">submenu2</li> 
      <li id="submenu3">submenu3</li> 
     </ul> 
    </li> 
</ul> 

Il problema è il menu con sottomenu, è attaccato automaticamente un z-index con il valore di 100. Io non voglio che sia così perché mi dà problemi su l'aggiunta di effetti lavalamp a quei menu.

ho cercato di modificare lo z-index utilizzando jQuery solo dopo la creazione del menu con wp_nav_menus semplicemente in questo modo:

jQuery(document).ready(function(){ 
    jQuery("#menu3").css("z-index", "0"); 
}); 

Ma, purtroppo, non funziona. Come posso rimuovere lo stile css in linea?

Answer 1

Utilizzare il metodo removeAttr, se si desidera eliminare tutto lo stile in linea aggiunto manualmente con javascript.

$("#elementid").removeAttr("style") 

Answer 2

reset z-index per valore iniziale

Si potrebbe semplicemente reimpostare lo z-index per il suo valore iniziale, inducendolo a comportarsi proprio come il li farebbe senza la dichiarazione di stile:

$(function(){ 
    $('#menu3').css('z-index', 'auto'); 
}); 

Puoi andare vanilla e usare plain javascript (il codice dovrebbe essere eseguito dopo che il menu html è stato caricato):

// If you're going for just one item 
document.querySelector('#menu3').style.zIndex = 'auto'; 

Rimuovere attr stile

Si potrebbe utilizzare jQuery per rimuovere gli attributi di stile da tutto l'elenco:

Nota: Tenete a mente questo rimuoverà tutti gli stili che sono stati impostati per il vostro elemento utilizzando l'attributo di stile .

$(function(){ 
    $('#menu3').removeAttr('style'); 
}); 

o vaniglia:

// Vanilla 
document.querySelector('#menu3').style = ''; 

Answer 3

Questo è quello che considero un approccio migliore perché rimuove solo lo stile z-index anziché l'attributo intero stile. Qui funziona Fiddle.

//As commented by @DA this is enough 
$("#elementid").css("zIndex","") 

//this could be useful in another situation so I will leave it :) 
$(document).ready(function() { 
    $('#menu3').attr('style', function(i, style){ 
    return style.replace(/\z-index\b[^;]+;?/g, ''); 
    }); 
}); 

Spero che sia d'aiuto.

Answer 4

Se si desidera rimuovere tutti gli stili inline, la risposta di Pranay è corretto:

$("#elementid").removeAttr("style") 

Se si desidera rimuovere una sola proprietà di stile, dicono z-index, allora si imposta su un valore vuoto:

$("#elementid").css("zIndex","") 

Dalla documentazione jQuery (http://api.jquery.com/css/):

Impostare il valore di una proprietà di stile a uno stri vuoto ng - ad es. $ ('# mydiv'). css ('color', '') - rimuove quella proprietà da un elemento se è già stata applicata direttamente, sia nell'attributo di stile HTML, che in quello di jQuery.metodo css() o tramite la manipolazione diretta DOM della proprietà style.