javascript – 使用onclick添加/替换边框

初学者,

我每次点击按钮时都会尝试在按钮周围显示边框.

边界会出现四分之一(或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设置了规则.你会想要确保这些匹配！

要添加边框,您需要应用border,例如：

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

javascript – 使用onclick添加/替换边框

解决方法

相关推荐