Usuń wbudowane elementy CSS elementów HTML

Question

Używam wordpress 3.5 i tworzę menu z podmenu. Jest skonstruowany tak:

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

Problemem jest menu z podmenu, to automatycznie dołączony z-index o wartości 100. Nie ma to tak być, ponieważ daje mi kłopoty na dodanie efektu lavalamp do tych menu.

Próbowałem zmieniać z-index za pomocą jQuery tuż po menu jest tworzone za pomocą wp_nav_menus po prostu tak:

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

Ale niestety, to nie działa. Jak mogę usunąć ten wbudowany styl CSS?

Answer 1

Użyj metody removeAttr, jeśli chcesz usunąć cały styl wstawiany dodany ręcznie za pomocą javascript.

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

Answer 2

reset z-index do wartości początkowej

Można po prostu zresetować z-index na jego wartość początkową powodując jej zachowywać się podobnie jak li byłoby bez deklaracji stylu:

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

Możesz przejść do wanilii i użyć zwykłego javascript (kod powinien działać po załadowaniu menu html):

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

Usuń styl atr

Można użyć jQuery aby usunąć styl atrybuty ze wszystkich swoją listę:

Uwaga: pamiętać ten usunie wszystkie style, które zostały zapisane do elementu za pomocą atrybutu stylu .

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

Albo waniliowy:

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

Answer 3

To jest to, co uważam za lepsze podejście, ponieważ usuwa tylko styl z-index zamiast atrybutu stylu całego. Oto działa 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, ''); 
    }); 
}); 

Mam nadzieję, że to pomaga.

Answer 4

Jeśli chcesz usunąć wszystkie style inline, odpowiedź Pranay jest poprawna:

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

Jeśli chcesz usunąć tylko jedną właściwość stylu, powiedzmy z-index, a następnie ustawić go do pustej wartości:

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

z dokumentacji jQuery (http://api.jquery.com/css/):

ustawienie wartości nieruchomości stylu do pustej stri ng - np. $ ('# mydiv'). css ('color', '') - usuwa tę właściwość z elementu, jeśli został już zastosowany bezpośrednio, czy to w atrybucie stylu HTML, przez jQuery.metoda css() lub bezpośrednia manipulacja DOM dla właściwości stylu.