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';
}

我有一个类＆＃39; txt＆＃39;在外部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

为什么它看不到display：none;外部css文件中的属性？

我还有一个问题：

我有id内容的div并且他有box-shadow属性，我在js中编写了一个代码，当我点击导航中的标签时更改它:(我试图删除容器的box shadow属性当我点击菜单中的链接以打开iframe中的页面时，iframe里面的iframe里面的iframe {x>}

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

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

但它发送错误无法读取属性＆＃39;样式＆＃39;为null 在hdd，当我把它从id改为class时它起作用但是它有点崩溃。

＆＃13;

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';
}

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

如果您在样式表中设置display.style，

""最初将为display。因此，即使元素不可见，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开头的元素，否则第一个函数调用将因版本的原因而失败。）

Answer 2

你没错，DOMElement.style对象与style-attribute相同。

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

Answer 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';
                }
            }
        }
    });
})();

HTML DOM（js，如果不是第一次点击元素的话）

3 个答案: