我在学校写一个页面，我写了一个 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>最佳答案
如果您在样式表中设置 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 开头的元素，否则第一个函数调用将因与您的版本相同的原因而失败。)
关于javascript - HTML DOM(如果在第一次点击元素时不起作用，则为 js)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44056199/