HTML DOM（如果在第一次单击元素时不起作用，则为 js）答案

【问题标题】：HTML DOM (js if don't work on first click on element)HTML DOM（如果在第一次单击元素时不起作用，则为 js）
【发布时间】：2017-05-20 00:37:14
【问题描述】：

我在一所学校写了一个页面，我写了一个 js 代码，因为我想在点击时显示跨度并在另一次点击时隐藏它，所以我做了：

function gbcn(name) {
return document.getElementsByClassName(name);
}
var txt = gbcn('txt');
function display(variable, number) {
  if(variable[number].style.display == 'none') variable[number].style.display = 'block';
  else variable[number].style.display = 'none';
}

我有一个类为 'txt' 的对象，在外部 css 文件中我给了他 display: none;属性，但是 js 中的这段代码看不到（我认为）这个外部属性并给出了 display: none 的属性；在 html 中。

When i click an element to show me .txt object

2nd click (not third xd) and it shows me the object

为什么看不到显示：无；外部 css 文件中的属性？

我还有一个问题：

我有带有 id 内容的 div，他有 box-shadow 属性，我在 js 中编写了一个代码来更改它，当我点击导航中的标签时：（我试图做的是删除容器的 box shadow 属性当我单击菜单中的链接以在 iframe 中打开页面时，右侧带有 iframe 的框 imgur.com/a/41pdI)

var n = document.getElementById("content");

function hdd() {
    n.style.boxShadow = '0px 0px 0px black';
}

但它发送一个错误无法读取 null 的属性“样式” 在 hdd，当我将它从 id 更改为 class 时，它可以工作，但它有点崩溃。

function gbcn(name) {
	return document.getElementsByClassName(name);
}

var n = document.getElementById("content");
var txt = gbcn('txt');

function display(variable, number) {
  var s = variable[number].style;
  s.display = s.display == 'block' ? 'none' : 'block';
}

function hdd() {
	n.style.boxShadow = '0px 0px 0px black';
}

body {
	background-color: antiquewhite;
	font-family: Arial;
}

#bd {
	
}

#content-wrapper {
	margin: auto;
	width: 1000px;
	height: 1000px;
}

#heading {
    width:100%;
    background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%); /*linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);*/
    color: white;
    opacity:0.95;
	height: 200px;
	border-radius: 10px;
	box-shadow: 0px 0px 10px black;
}

#w {
	position: relative;
	left: 10px;
}

#m {
	position: relative;
	top: -60px;
	left: 10px;
}

#j {
	position: relative;
	top: -225px;
	left: 80px;
}

#cmsimg {
	float: left;
	width: 200px;
	height: 200px;
}

#cms {
	text-align: center;
	font-size: 130px;
	padding-top: 25px;
	float: left;
	width: 800px;
	height: 175px;
	letter-spacing: 50px;
	text-shadow: 10px 10px 4px gray;
	color: #263275;
}

nav {
	float: left;
	width: 230px;
	height: 760px;
	padding-left: 10px;
	font-size: 25px;
	line-height: 50px;
	margin-right: 10px;
	margin-top: 10px;
	border-radius: 10px;
	background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
    color: white;
    opacity:0.95;
    box-shadow: 0px 0px 10px black;
}

iframe {
	width: 750px;
	height: 760px;
	border-radius: 10px;
}

#content {
	width: 750px;
	height: 760px;
	float: left;
	margin-top: 10px;
	border-radius: 10px;
	background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
    color: white;
    opacity:0.95;
    box-shadow: 0px 0px 10px black;
}

footer {
	float: left;
	text-align: center;
	width: 1000px;
	height: 30px;
	padding-top: 10px;
	margin-top: 10px;
	border-radius: 10px;
	background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
    color: white;
    opacity:0.95;
    box-shadow: 0px 0px 10px black;
}

.li1 {
	list-style-image: url("grafika/ww.png");
}

.li2 {
	list-style-image: url("grafika/jj.png");
}

.li3 {
	list-style-image: url("grafika/mm.png");	
}

ul {
	-webkit-margin-before: 0px;
}

a {
	text-decoration: none;
	color: white
}

a:hover {
	color: antiquewhite;
	text-shadow: 0px 0px 5px black;
}
/*OTHER SITES*/
#wrapper {
	margin: auto;
	width: 700px;
	min-height: 600px;
	background: linear-gradient(141deg, #1fc9be 30%, #2fd9ec 80%, #3dc6f9 90%);
	border-radius: 10px;
}

#nagłówek {
	width: 700px;
	/*background: linear-gradient(141deg, #0d968a 0%, #0da6b9 51%, #0a93c6 75%);*/
    color: white;
    opacity:0.95;
	height: 200px;
	border-radius: 10px;
	box-shadow: 0px 0px 10px black;
}

#nazwa {
	text-align: center;
	font-size: 130px;
	padding-top: 10px;
	float: left;
	width: 450px;
	height: 190px;
	text-shadow: 10px 10px 4px gray;
	color: #263275;
}

#img {
	float: left;
	width: 200px;
	height: 200px;
}

#obraz {
	left: 25px;
	top: 25px;
	position: relative;
}

#treść {
	width: 700px;
	min-height: 530px;
	margin-top: 10px;
	border-radius: 10px;
	/*background: linear-gradient(141deg, #0d968a 0%, #0da6b9 51%, #0a93c6 75%);*/
    color: white;
    opacity:0.95;
    object-fit: contain;
}

.button {
	width: 700px;
	height: 50px;
	display: block;
	text-align: center;
	font-weight: bold;
	font-size: 40px;
	box-shadow: 0px 0px 10px black;
	border-radius: 10px;
}

.button:hover {
	box-shadow: 5px 5px 10px black, 0px 0px 20px black;
	background: linear-gradient(141deg, #1fc9be 30%, #2fd9ec 80%, #3dc6f9 90%);
}

.txt {
	padding: 10px;
	width: 680px;
	text-align: justify;
	margin-top: 15px;
	margin-bottom: 30px;
	border-bottom: 10px solid #0d978b;
	border-top: 10px solid #0d978b;
	box-shadow: 0px 0px 10px black;
	display: none;
	border-radius: 10px;
}

<!DOCTYPE html>
<html lang="pl">
<head>
	<title></title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="js.js" type="text/javascript"></script>
</head>
<body>
	<div id="content-wrapper">
		<div id="heading">
			<div id="cmsimg">
				<img src="grafika/w.png" width="130px" height="130px" id="w">
				<img src="grafika/m.png" width="130px" height="130px" id="m">
				<img src="grafika/j.png" width="130px" height="130px" id="j">
			</div>
			<div id="cms">
				CMS
			</div>
			<div style="clear: both;"></div>
		</div>
		<nav>
			<ul>
				<a onclick="hdd()" href="wordpress.html" target="iframe"><li class="li1">Wordpress</li></a>
				<a href="joomla.html" target="iframe"><li class="li2">Joomla!</li></a>
				<a href="moodle.html" target="iframe"><li class="li3">Moodle</li></a>
			</ul>
		</nav>
		<div id="content">
			<iframe name="iframe" frameborder="0"></iframe>
		</div>
		<div style="clear: both;"></div>
		<footer>99081105119</footer>
	</div>
</body>
</html>

【问题讨论】：

能否也发布您的 html 以便我们查看当前行为？
发布您的 html，在创建或编辑帖子时按“Ctrl+M”切换到代码编辑器。它将帮助其他用户更好地帮助您。
我可以以某种方式将我页面中包含的外部页面添加到代码中吗？

标签： javascript html css if-statement

【解决方案1】：

如果您在样式表中设置display，则display.style 最初将是""。因此，即使元素不可见，if(variable[number].style.display == 'none') 也会失败。

检查当前的style.display 通常是个坏主意；你应该使用一个变量来存储状态，切换变量，然后根据变量设置样式。

为了快速而肮脏的修复，请切换逻辑：

function display(variable, number) {
  var s = variable[number].style;
  s.display = s.display == 'block' ? 'none' : 'block';
}

（但是这仅适用于以display: none 开头的元素，否则第一个函数调用将因与您的版本相同的原因而失败。）

【讨论】：

【解决方案2】：

你是对的，DOMElement.style 对象和 style-attribute 是一样的。

如果您使用外部样式表应用某些内容，则需要 Computed Style

【讨论】：

【解决方案3】：

我认为你必须编写一些代码：

    ul.menu {
    margin: 0;
    padding: 0;
    list-style: none;

    max-width: 200px;
}

ul.menu > li {
    background-color: #efefef;
    width: 100%;

    text-align: center;

    padding: 5px 0;

    border-radius: 10px;

    cursor: pointer;
}

ul.menu > li:hover {
    background-color: #dedede;
}

ul.menu > li > div.info {
    display: none;
}

ul.menu > li > div.info.active {
    display: block;

    background-color: white;
    margin: 5px;
    padding: 5px;
}

HTML

<ul class="menu">
<li class="btn">
    One

    <div class="info">One a ponce a time</div>
</li>
<li class="btn">
    Two
    <div class="info">Two moons</div>
</li>
<li class="btn">
    Three
    <div class="info">Three pigs</div>
</li>

JS：

 (function() {
    var btns = document.getElementsByClassName('btn');

    Object.keys(btns).map(function(key) {
        var btn = btns[key];

        btn.onclick = function (event) {
            var info = event.target.getElementsByClassName('info');

            if (info.length) {
                if (info[0].className.indexOf('active') < 0) {
                    info[0].className += ' active';
                } else {
                    info[0].className = 'info';
                }
            }
        }
    });
})();

【讨论】：

ul 标签是菜单，li 标签是按钮，div 标签是隐藏块。通过点击 li 标记活动类将被安装。再次点击 div 块隐藏