[英]Edit CSS using JavaScript
我有以下(簡體)HTML:
<div id="topMenu">
<div class="menu_wrapper">
<div class="logo">
</div>
<div class="responsive_menu" id="resp_Menu" onClick="fnResponsiveMenu()">
</div>
<div class="nav_wrapper">
<div class="navigation" id="navMenu">
<a href="Home.aspx">Contact Us</a>
</div>
<div class="navigation" id="navMenu">
<a href="Home.aspx">Information</a>
</div>
<div class="navigation" id="navMenu">
<a href="Home.aspx">Venue Details</a>
</div>
<div class="navigation" id="navMenu">
<a href="Home.aspx">Registration & Payment</a>
</div>
<div class="navigation" id="navMenu">
<a href="Home.aspx">Agenda</a>
</div>
<div class="navigation" id="navMenu">
<a href="Home.aspx">Home</a>
</div>
</div>
</div>
和以下CSS:
.navigation {
width:100%;
background-color:#3171B7;
border-bottom:1px solid #ffffff;
margin:0;
text-transform:uppercase;
font-size:16px;
height:40%;
padding-top:10px;
}
#navMenu{
display:none;
}
以及以下JavaScript:
function fnResponsiveMenu()
{
var oNavMenu = document.getElementById('navMenu');
var oDisplay = oNavMenu.style.display;
if(oDisplay=="none")
{
oDisplay.style.display = "";
}
}
問題是單擊id="navMenu"
沒有將id="navMenu"
的div設置為可見。
通過查看DOM資源管理器,我可以看到該元素設置為display:none,但是在調用JavaScript函數時,顯示返回為“”。
我已經搜索了互聯網,但據我所知,我正在正確地實施所有操作。
這與CSS有關嗎? 我有我看不到的明顯錯誤,還是功能上缺少某些東西?
您那里有幾個問題。
您在多個元素上使用了相同的id
。 那是無效的。 標識符是標識符 ,它們必須是唯一的。 如果要將元素歸為一組,請使用類。
您正在查看Element#style
對象的display
屬性,但是不會具有樣式表應用的值。 它只會將值直接應用於元素。
oDisplay.style.display = "";
應該是oNavMenu.style.display = "";
(元素的.style
,而不是.style
上的.style
)-但這無法覆蓋CSS。
您可以通過getComputedStyle
(標准)或.currentStyle
(僅限IE)獲取元素的活動樣式。
var element = /*...get the element...*/;
var currentStyle = element.currentStyle || getComputedStyle(element);
if (currentStyle.display === "none") {
// ...
}
現場示例:
setTimeout(function() { var element = document.querySelector(".hidden"); var currentStyle = element.currentStyle || getComputedStyle(element); if (currentStyle.display === "none") { element.style.display = "block"; } }, 500);
<div class="hidden">Has class hidden</div>
但是更好的答案可能是刪除類:
setTimeout(function() { var classRex = /\\bhidden\\b/; var element = document.querySelector(".hidden"); if (classRex.test(element.className)) { element.className = element.className.replace(classRex, ''); } }, 500);
<div class="hidden">Has/had class hidden</div>
所有元素的ID必須不同,例如:
<div class="nav_wrapper">
<div class="navigation" id="navMenu">
<a href="Home.aspx">Contact Us</a>
</div>
<div class="navigation" id="navMenu1">
<a href="Home.aspx">Information</a>
</div>
<div class="navigation" id="navMenu2">
<a href="Home.aspx">Venue Details</a>
</div>
<div class="navigation" id="navMenu3">
<a href="Home.aspx">Registration & Payment</a>
</div>
<div class="navigation" id="navMenu4">
<a href="Home.aspx">Agenda</a>
</div>
<div class="navigation" id="navMenu5">
<a href="Home.aspx">Home</a>
</div>
正如@ketan所寫,元素的ID應該是唯一的。 HTML具有非唯一性,但這是一個不好的做法。
您應該考慮在JavaScript中使用jquery ,然后可以使用css樣式選擇器選擇所有元素,例如$(".navigation")
,然后一起更改所有元素。
例如,您可以輕松地將代碼更改為一行: $(".navigation").hide()
,它將隱藏navigation
類中的所有元素。
多合一代碼可解決您的問題。
它在navList中顯示所有隱藏的標簽
嘗試運行以下代碼(@Alex):
<!doctype HTML>
<html>
<head>
<style type="text/css">
.navigation {
width:100%;
background-color:#3171B7;
border-bottom:1px solid #ffffff;
margin:0;
text-transform:uppercase;
font-size:16px;
height:40%;
padding-top:10px;
}
#navList{
display: none;
}
</style>
<script type="text/javascript">
function fnResponsiveMenu()
{
var oNavMenu = document.getElementById("navList");
if(oNavMenu.style.display=="")
{
oNavMenu.style.display = "inline";
}
}
</script>
</head>
<body>
<div class="menu_wrapper">
<div class="logo">
<img></img>
</div>
<div class="responsive_menu" id="resp_Menu" onClick="fnResponsiveMenu()">
Click to show
</div>
<div class="nav_wrapper" id="navList">
<div class="navigation" id="navMenu">
<a href="Home.aspx">Contact Us</a>
</div>
<div class="navigation" id="navMenu">
<a href="Home.aspx">Information</a>
</div>
<div class="navigation" id="navMenu">
<a href="Home.aspx">Venue Details</a>
</div>
<div class="navigation" id="navMenu">
<a href="Home.aspx">Registration & Payment</a>
</div>
<div class="navigation" id="navMenu">
<a href="Home.aspx">Agenda</a>
</div>
<div class="navigation" id="navMenu">
<a href="Home.aspx">Home</a>
</div>
</div>
</div>
</body>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.