[英]Edit CSS using JavaScript
I have the following (simplified) HTML: 我有以下(简体)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>
and the following CSS: 和以下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;
}
and the following JavaScript: 以及以下JavaScript:
function fnResponsiveMenu()
{
var oNavMenu = document.getElementById('navMenu');
var oDisplay = oNavMenu.style.display;
if(oDisplay=="none")
{
oDisplay.style.display = "";
}
}
The problem is that the div with id="navMenu"
is not being set to visible when I click. 问题是单击
id="navMenu"
没有将id="navMenu"
的div设置为可见。
From looking at the DOM explorer, I can see the element is set to display:none, but when calling the JavaScript function, the display is coming back as "". 通过查看DOM资源管理器,我可以看到该元素设置为display:none,但是在调用JavaScript函数时,显示返回为“”。
I have searched the internet, but as far as I can see I am implementing everything correctly. 我已经搜索了互联网,但据我所知,我正在正确地实施所有操作。
Is this something to do with the CSS? 这与CSS有关吗? Do I have an obvious error that I cant see, or is there something missing in the functionality?
我有我看不到的明显错误,还是功能上缺少某些东西?
You have a couple of issues there. 您那里有几个问题。
You're using the same id
on more than one element. 您在多个元素上使用了相同的
id
。 That's invalid. 那是无效的。 Identifiers are identifiers , they must be unique.
标识符是标识符 ,它们必须是唯一的。 If you want to classify elements together in a group, use a class.
如果要将元素归为一组,请使用类。
You're looking at the display
property of the Element#style
object, but that won't have the value applied by a stylesheet. 您正在查看
Element#style
对象的display
属性,但是不会具有样式表应用的值。 It will only have values directly applied to the element. 它只会将值直接应用于元素。
oDisplay.style.display = "";
should be oNavMenu.style.display = "";
应该是
oNavMenu.style.display = "";
(the element's .style
, not .style
on the string) — but that won't work to override the CSS. (元素的
.style
,而不是.style
上的.style
)-但这无法覆盖CSS。
You can get the active styles for the element via getComputedStyle
(standard) or .currentStyle
(IE-only) 您可以通过
getComputedStyle
(标准)或.currentStyle
(仅限IE)获取元素的活动样式。
var element = /*...get the element...*/;
var currentStyle = element.currentStyle || getComputedStyle(element);
if (currentStyle.display === "none") {
// ...
}
Live example: 现场示例:
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>
But the better answer might well be to remove the class instead: 但是更好的答案可能是删除类:
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 must be different for all element like: 所有元素的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>
As @ketan wrote, The ID of an element should be unique. 正如@ketan所写,元素的ID应该是唯一的。 HTML works with it being non-unique, but it's a bad practice.
HTML具有非唯一性,但这是一个不好的做法。
You should consider using jquery in your javascript, then you can select all the elements with css style selectors, like $(".navigation")
, and change them all together. 您应该考虑在JavaScript中使用jquery ,然后可以使用css样式选择器选择所有元素,例如
$(".navigation")
,然后一起更改所有元素。
For example, you can easily change your code to the one line: $(".navigation").hide()
which will hide all elements with the navigation
class. 例如,您可以轻松地将代码更改为一行:
$(".navigation").hide()
,它将隐藏navigation
类中的所有元素。
All in one code solves your problem. 多合一代码可解决您的问题。
It displays all the hidden tags in the navList 它在navList中显示所有隐藏的标签
Try running this code ( @Alex ): 尝试运行以下代码(@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>
I've also faced the same issue once. 我也曾经遇到过同样的问题。 The easiest possible solution is use jQuery selector link .
最简单的解决方案是使用jQuery选择器链接 。
In jquery you can easily access any field using following code detail link 在jquery中,您可以使用以下代码详细信息链接轻松访问任何字段
$('#id').attr('style')
and set that attribute using following code 并使用以下代码设置该属性
$('#id').attr('style','')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.