gpt4 book ai didi

javascript - 更改类名不会更改 CSS

转载 作者:太空宇宙 更新时间:2023-11-04 00:05:19 26 4
gpt4 key购买 nike

我有一个简单的乒乓球游戏 http://shodor.org/~amalani/Pong%203.1/ ,当您按 P 或单击设置按钮时,我试图通过更改类名使设置 div 淡入。类名更改,但 CSS 未更​​新。代码是

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<link href='main.css' type='text/css' rel='stylesheet'>
<meta name="viewport" content="width=device-width"/>
<script src='game.js' type='text/javascript'></script>
<title>Pong Game</title>
</head>
<body onMouseMove='mouse()' onTouchStart='mouse()' onLoad='ball()' onkeydown="move(event); this.select()" >
<div id='wrap' onKeyDown='move();'>
<canvas id='level' width=600px height = 25px ></canvas><br>
<div id='canvasWrap'>
<div id='options'>
<a href='#' class='links'><span id='pause' class='options' onClick='pause()'>Settings</span></a>
<span id='restart' class='options'>&nbsp&nbsp&nbsp&nbsp&nbspRestart</span>
<br><br><div id='settings' class='visible'>
<span><b>Controls:</b></span><br>
<span>adsfasdfasdfasdf</span>
</div>
</div><br>
<canvas id='canvas' width=600px height=400px >If you can see this, please enable Javascript or switch to a newer browser</canvas>
</div>
<span id='score'></span>
<button type='button' onClick='show()'>Show change</button><br>
<span id='myspan'></span>
<script type='text/javascript' src='global.js'></script>

</div>
<script>

</script>
</body>
</html>

相关的javascript是

var settings = document.getElementById('settings');

function pause() {
//Toggle pause
if (time && !lost) {
time = false;
settings.className = 'seen';
} else if (!lost) {
time = true;
document.getElementById('settings').style.display = 'none';
}
ball();
}

CSS 是

@CHARSET"UTF-8";
canvas {
border:1px solid black;
position:relative;
top:0px;
}
#wrap {
width:100%;
height:100%;
}
body {
width:100%;
height:100%;
}
#canvaswrap {
width:600px;
height:600px;
margin:10px;
padding:10px;
}
#options {
background-color:black;
color:lightgrey;
position:relative;
width:600px;
top:20px;
text-align:center;
z-index:1;
}
.options:hover {
color:white;
}
#settings {
display:none;
position:absolute;
width:599px;
height:400px;
background-color:lightgrey;
color:white;
opacity:0;
}
#settings>a:link {
color:white;
text-decoration:none;
}
.links {
color:lightgrey;
text-decoration:none;
}
.seen {
display:block;
opacity: 1;
color:pink;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
-ms-transition: opacity 1s;
transition: opacity 1s;
}

本质上,类肯定在变化,但 CSS 没有。如果您认为这是原因,我可以发布其余的 Javascript

最佳答案

#settings 特异性太高,试试:

#settings.seen {
display:block;
opacity: 1;
color:pink;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
-ms-transition: opacity 1s;
transition: opacity 1s;
}

关于javascript - 更改类名不会更改 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15121127/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com