初学者,
我每次点击按钮时都会尝试在按钮周围显示边框.
边界会出现四分之一(或1/3)与相同的onclick =“myFunction().我不明白.如果不使用新的css类(这里：.test_skill)我怎么能正确地做呢？我’我试图替换或修改.btn中的实际边界,但它没有做任何事情.
我的.html文件是：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="testborder.js"></script>
<link rel="stylesheet" type="text/css" href="testbutton.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
</head>
<body>
<button class="btn"><i class=" fas fa-shipping-fast fa-inverse"></i></button>
<button class="btn"><i class=" fas fa-address-card fa-inverse"></i></button>
<!-- ici fa-inverse manquant -->
<button class="btn"><i class=" fas fa-camera-retro"></i></button>
<div id="skill_unlocked" onclick="myFunction()">
<button class="btn"><i class="fas fa-flag fa-inverse"></i></button>
</div>
<button class="btn"></button>
</body>
</html>
我的.css文件是：
body{
background-color: #575757;
}
.btn{
margin: 10px;
display: block;
opacity: 0.6;
border: 5px hidden;
background-color: grey;
border-radius: 50%;
cursor: pointer;
height: 70px;
width: 70px;
outline: none;
}
.btn:hover{
opacity: 0.9;
background-color: #2B2B2B;
}
.fas{
font-size: 28px;
}
.test_skill{
}
我的.js文件是：
function myFunction()
{
document.getElementById('skill_unlocked').setAttribute("class",".test_skill");
}
奖金问题：我不确定我为我的按钮选择的结构是< div>,< button>,< i>和< a>我觉得以后我会遇到问题,因为有点随机放置了类标签.它不适合我在thecss.file上想要的东西
function myFunction()
{
document.getElementById('skill_unlocked').setAttribute("class",".test_skill");
}
body{
background-color: #575757;
}
.btn{
margin: 10px;
display: block;
opacity: 0.6;
border: 5px hidden;
background-color: grey;
border-radius: 50%;
cursor: pointer;
height: 70px;
width: 70px;
outline: none;
}
.btn:hover{
opacity: 0.9;
background-color: #2B2B2B;
}
.fas{
font-size: 28px;
}
.test_skill{
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="testborder.js"></script>
<link rel="stylesheet" type="text/css" href="testbutton.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
</head>
<body>
<button class="btn"><i class=" fas fa-shipping-fast fa-inverse"></i></button>
<button class="btn"><i class=" fas fa-address-card fa-inverse"></i></button>
<!-- ici fa-inverse manquant -->
<button class="btn"><i class=" fas fa-camera-retro"></i></button>
<div id="skill_unlocked" onclick="myFunction()">
<button class="btn"><i class="fas fa-flag fa-inverse"></i></button>
</div>
<button class="btn"></button>
</body>
</html>
解决方法
一些东西：
>以编程方式添加类test_skill时,您要省略点(您有“.test_skill”).
>您可能希望将onclick和ID skill_unlocked添加到< button>而不是包含< div>的全角.在这种情况下,您不需要< div>一点都不
> .setAttribute(“class”,…)实际上会覆盖该类(如果您有一个类).相反,你真的应该使用.classList.add("test_skill").
>您要添加的类是test_skill,但是您为.test_skill_unlocked设置了规则.你会想要确保这些匹配！
.test_skill {
border: 2px solid red;
}
而不是针对单个元素,我建议使用document.getElementsByClassName("btn")获取所有按钮.请注意,这将返回NodeList collection个元素,因此您需要循环它们,为每个元素添加一个事件处理程序.在这里,您可以使用JavaScript关键字this来引用您当前点击的按钮.这样,您可以使用相同的函数将边框类添加到每个按钮.
这一切都可以在以下内容中看到：
var buttons = document.getElementsByClassName("btn");
for (var i = 0; i < buttons.length; i++) {
document.getElementsByClassName("btn")[i].addEventListener("click",function() {
this.classList.add("test_skill");
});
}
body {
background-color: #575757;
}
.btn {
margin: 10px;
display: block;
opacity: 0.6;
border: 5px hidden;
background-color: grey;
border-radius: 50%;
cursor: pointer;
height: 70px;
width: 70px;
outline: none;
}
.btn:hover {
opacity: 0.9;
background-color: #2B2B2B;
}
.fas {
font-size: 28px;
}
.test_skill {
border: 2px solid red;
}
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="testborder.js"></script> <link rel="stylesheet" type="text/css" href="testbutton.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous"> </head> <body> <button class="btn"><i class=" fas fa-shipping-fast fa-inverse"></i></button> <button class="btn"><i class=" fas fa-address-card fa-inverse"></i></button> <!-- ici fa-inverse manquant --> <button class="btn"><i class=" fas fa-camera-retro"></i></button> <button class="btn"><i class="fas fa-flag fa-inverse"></i></button> <button class="btn"></button> </body> </html>
