Entfernen Sie inline css eines HTML-Elements

Question

Ich verwende Wordpress 3.5 und erstellen Menü mit Untermenüs. Es ist wie folgt strukturiert:

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

Das Problem das Menü mit Untermenü ist, wird es automatisch einen Z-Index mit dem Wert 100 angebracht ich es so sein nicht will, weil es Probleme gibt mir über das Hinzufügen von lavalamp Wirkung zu diesen Menüs.

Ich habe versucht, den Z-Index unter Verwendung jquery kurz nach dem Menü erstellt zu bearbeiten ist wp_nav_menus einfach so mit:

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

Aber leider funktioniert es nicht. Wie kann ich diesen Inline-CSS-Stil entfernen?

Answer 1

Verwenden Sie die Methode removeAttr, wenn Sie alle Inline-Stile löschen möchten, die Sie manuell mit Javascript hinzugefügt haben.

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

Answer 2

Reset-z-index

auf den Anfangswert

Sie einfach den Z-Index, um sie ohne die Stildeklaration ebenso wie die li würde verhalten verursacht hat Anfangswert zurückgesetzt könnte:

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

Sie können Vanille gehen und plain javascript verwenden (Code sollte laufen, nachdem Ihr Menü html geladen hat):

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

entfernen Stil attr

Sie könnten jQuery verwenden den Stil von allen Attributen der Liste zu entfernen:

Hinweis: Beachten Sie dies alle Stile entfernen, das Attribut zu Ihrem Element mit dem Stil festgelegt wurden .

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

oder Vanille:

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

Answer 3

Dies ist, was ich einen besseren Ansatz betrachten, weil es nur die Art z-Index entfernt anstelle des gesamten Stil-Attribut. Hier ist eine funktionierende 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, ''); 
    }); 
}); 

Ich hoffe, es hilft.

Answer 4

Wenn Sie alle Inline-Styles entfernen möchten, Pranay Antwort ist richtig:

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

Wenn Sie nur einen Stil, das sagen z-Index entfernen möchten, dann sind Sie es auf einen leeren Wert gesetzt:

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

von der jQuery-Dokumentation (http://api.jquery.com/css/):

den Wert einer stil~~POS=TRUNC auf einen leeren stri einstellen ng - z.B. $ ('# mydiv') .css ('color', '') - entfernt diese Eigenschaft von einem Element, wenn es bereits direkt angewendet wurde, egal ob im HTML-Stil-Attribut, über jQuery's.css() -Methode oder durch direkte DOM-Manipulation der style -Eigenschaft.