Javascript 对标记元素的SetaAttribute调用无效
我是HTML5、CSS和Javascript方面的新手。如果我的问题很基本,我很抱歉。我正在开发一个响应性导航菜单。当浏览器宽度大于500时,将显示垂直导航栏。一旦屏幕页面的大小小于500(例如,在手机上),水平导航栏应该隐藏,而汉堡包图标会显示出来。单击汉堡菜单时,汉堡图标下方将显示一个垂直导航栏。 但问题是,当我在导航栏上调用setAttribute(“可见性”、“可见”)或setAttribute(“可见性”、“隐藏”)时,它不起作用。我不知道为什么。setAttribute在加载屏幕时或单击汉堡图标时调用Javascript 对标记元素的SetaAttribute调用无效,javascript,css,html,Javascript,Css,Html,我是HTML5、CSS和Javascript方面的新手。如果我的问题很基本,我很抱歉。我正在开发一个响应性导航菜单。当浏览器宽度大于500时,将显示垂直导航栏。一旦屏幕页面的大小小于500(例如,在手机上),水平导航栏应该隐藏,而汉堡包图标会显示出来。单击汉堡菜单时,汉堡图标下方将显示一个垂直导航栏。 但问题是,当我在导航栏上调用setAttribute(“可见性”、“可见”)或setAttribute(“可见性”、“隐藏”)时,它不起作用。我不知道为什么。setAttribute在加载屏幕时或
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/page-main.css">
<link rel="stylesheet" href="./css/master.css">
<link rel="stylesheet" href="./css/footer.css">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300" rel="stylesheet">
<!-- fonts -->
<title>Home Page</title>
</head>
<body onload="hideORShow()">
<header>
<nav id="navigation-links" class="navbar navigation-box">
<div class="col-1of6 nav-item">
<a class="main-nav-item-page-index" href="./index.html">Home</a>
</div>
<div class="col-1of6 nav-item" >
<a class="main-nav-item-page-index" href="./spring-summer.html">Fall</a>
</div>
<div class="col-1of6 nav-item">
<a class="main-nav-item-page-index" href="./fall-winter.html">Winter</a>
</div>
<div class="col-1of6 nav-item">
<a class="main-nav-item-page-index" href="./leather.html">Leather</a>
</div>
</nav>
<div class="open-slide">
<a href="#">
<svg id="hamburgur-icon" onClick="openSlideMenu()">
<path d="M0,5 30,5" stroke="#000" stroke-width="5"/>
<path d="M0,14 30,14" stroke="#000" stroke-width="5"/>
<path d="M0,23 30,23" stroke="#000" stroke-width="5"/>
</svg>
</a>
</div>
<div id="side-menu" class="side-nav" >
<a href="#" class="btn-close" onClick="closeSlideMenu()">×</a>
<a class="main-nav-item-page-index" href="./index.html">Home</a>
<a class="main-nav-item-page-index" href="./spring-summer.html">Fall</a>
<a class="main-nav-item-page-index" href="./fall-winter.html">Winter</a>
<a class="main-nav-item-page-index" href="./leather.html">Leather</a>
</div>
</header>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
我在chrome调试器中看到在触发事件后可见性属性发生了更改,但在浏览器中仍然没有看到可视性更改。例如,当我单击“关闭”按钮时,汉堡图标下方的垂直导航栏仍然存在。
如果有任何提示,我将不胜感激 您试图更改的是CSS样式,而不是HTML属性。所讨论的属性是
style
属性,但在JS中有一种简单的方法可以做到这一点:
比如说,
slidingMenu.style.visibility = "visible";
slidingMenu.style.backgroundColor = "red";
您试图更改的是CSS样式,而不是HTML属性。所讨论的属性是
style
属性,但在JS中有一种简单的方法可以做到这一点:
比如说,
slidingMenu.style.visibility = "visible";
slidingMenu.style.backgroundColor = "red";
但问题是当我调用setAttribute(“可见性”、“可见”)或setAttribute(“可见性”、“隐藏”)时
可见性是CSS样式,而不是元素属性。这就是它不起作用的原因。尝试替换任何看起来像以下内容的行:
navigationBox.setAttribute("visibility","hidden");
hamburgerMenu.setAttribute("visibility","visible");
与:
后者实际上为元素设置了可见性
CSS样式,而前者在元素上设置了一个属性(作为属性的可见性本身不起任何作用)
但问题是当我调用setAttribute(“可见性”、“可见”)或setAttribute(“可见性”、“隐藏”)时
可见性是CSS样式,而不是元素属性。这就是它不起作用的原因。尝试替换任何看起来像以下内容的行:
navigationBox.setAttribute("visibility","hidden");
hamburgerMenu.setAttribute("visibility","visible");
与:
后者实际上为元素设置了
可见性
CSS样式,而前者在元素上设置了一个属性(作为属性的可见性本身不起任何作用)。好!请批准此答案(或CRice的)以结束问题好!请批准此答案(或CRice的答案)以结束问题“属性”是元素的DOM事物属性。“属性”是一个CSS样式的属性。谢谢c-smile,我不知道。我不明白为什么这里的人给-1。那么,新学员应该向谁提问呢?@user1836957也许因为在提问之前你应该做一个小调查,你肯定会得到答案。@Temani你刚才给了我一个否定点吗?如果是,请将其反转,因为现在我面临根本无法提问的危险,“属性”是元素的DOM事物属性。“属性”是一个CSS样式的属性。谢谢c-smile,我不知道。我不明白为什么这里的人给-1。那么,新学员应该向谁提问呢?@user1836957也许因为在提问之前你应该做一个小调查,你肯定会得到答案。@Temani你刚才给了我一个否定点吗?如果是的话,请把它颠倒过来,因为现在我面临着根本无法提问的危险