gpt4 book ai didi

javascript - JS html css 改css需要了解

转载 作者:行者123 更新时间:2023-11-28 05:31:10 24 4
gpt4 key购买 nike

我尝试通过 js 更改 css,但脚本仅更改了一次 css,之后停止工作。有人可以帮助我吗?

    <html>
<script>
function cambio_eff(a){

if (a == '1'){
effect01.id = 'effect01';
effect02.id = 'effect01';
effect03.id = 'effect01';

}
if (a == '2'){
effect01.id = 'effect02';
effect02.id = 'effect02';
effect03.id = 'effect02';
}
if (a == '3'){
effect01.id = 'effect03';
effect02.id = 'effect03';
effect03.id = 'effect03';
}
}

</script>
</head>

<body>
...
<div id="effect01">
<button id="efi01" onClick="cambio_eff('1');" >AndV1x1b(default)</button><br><br>
<button id="efi02" onClick="cambio_eff('2');">And2x2ch</button>
<button id="efi03" onClick="cambio_eff('3');">And2x2ch</button>
</div>
...

</body>

</html>

到此结束,就是代码了。感谢您的帮助。

最佳答案

id is intended to be a globally unique attribute而不是您可以更改或分配给多个元素的元素。尝试像这样使用类属性:

<html>
<head>
</head>
<body>
<ul>
<li><button id="efi01">AndV1x1b(default)</button></li>
<li><button id="efi02">And2x2ch</button></li>
<li><button id="efi03">And2x2ch</button></li>
</ul>

<div id="box01" class="effect01">
<h2>Box 1</h2>
</div>

<div id="box02" class="effect01">
<h2>Box 2</h2>
</div>

<div id="box03" class="effect01">
<h2>Box 3</h2>
</div>

<script>
function cambio_eff(a, e) {
var box01 = document.getElementById("box01");
var box02 = document.getElementById("box02");
var box03 = document.getElementById("box03");

if (a == "1") {
box01.className = "effect01";
box02.className = "effect01";
box03.className = "effect01";

} else if (a == "2") {
box01.className = "effect02";
box02.className = "effect02";
box03.className = "effect02";

} else if (a == "3") {
box01.className = "effect03";
box02.className = "effect03";
box03.className = "effect03";

}

}

document.getElementById("efi01").onclick = function(e){cambio_eff(1);};
document.getElementById("efi02").onclick = function(e){cambio_eff(2);};
document.getElementById("efi03").onclick = function(e){cambio_eff(3);};
</script>
</body>

工作示例:https://jsfiddle.net/uh2ort0r/3/

关于javascript - JS html css 改css需要了解,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38503465/

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