javascript - HTML DOM(如果在第一次点击元素时不起作用，则为 js)

Question

我在学校写一个页面，我写了一个 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 文件中我给了他显示:无；属性，但是 js 中的这段代码看不到(我认为)这个外部属性并给出显示属性:无；在 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 imgur.com/a/41pdI 中打开页面时，右侧的框内有 iframe)

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

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

但它发送了一个错误 Cannot read property 'style' of null 在硬盘上，当我将其从 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>

Answer 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 开头的元素，否则第一个函数调用将因与您的版本相同的原因而失败。)