使用onclick添加/替换边框

时间：2018-05-01 04:06:43

标签： javascript html css

初学者，

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

边界将逐个季度（或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>我的按钮选择的结构我认为以后我会遇到问题，因为class标签有点随机放置。它不符合css.file

上我想要的内容

＆＃13;
＆＃13; 
function myFunction()
{
    document.getElementById('skill_unlocked').setAttribute("class", ".test_skill");
}
＆＃13; 
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{
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

8 个答案:

答案 0 :(得分：6)

一些事情：

  • 以编程方式添加课程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 来引用您当前点击的按钮。这样，您可以使用相同的函数将边界类添加到每个按钮。

以下都可以看到：

＆＃13;
＆＃13; 
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");
  });
}
＆＃13; 
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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：3)

使用此功能

function myFunction() {
    var el = document.getElementById('skill_unlocked');
    el.classList.add("test_skill");
}

答案 2 :(得分：3)

这是我支付的一些代码。我认为它确实是你要求的，但是在悬停时不要点击。不完全是你需要的，但也许是一些想法。

＆＃13;
＆＃13; 
$( ".hvr-ripple-out-good" ).click(function() {
    $( this ).toggleClass( "fill-good" );
  });
＆＃13; 
.hvr-ripple-out-good {
  margin: 5px;
  width: 20px;
  height: 20px;
  padding: 10px;
  color: #333;
  text-align: center;
  border: 1px solid #333;
  border-radius: 50%;
}

.hvr-ripple-out-good:hover {
  color: #39CCCC;
  border-color: #39CCCC;
}

/* Ripple Out */
@-webkit-keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}

@keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}

.hvr-ripple-out-good {
  display: inline-block;
  vertical-align: middle;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

.hvr-ripple-out-good:before {
  content: '';
  position: absolute;
  border: rgba(0, 0, 0, 0.0) solid 2px;
  border-radius: 50%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

.hvr-ripple-out-good:hover:before, .hvr-ripple-out-good:focus:before, .hvr-ripple-out-good:active:before {
  -webkit-animation-name: hvr-ripple-out;
  animation-name: hvr-ripple-out;
  border-color: #39CCCC;
  animation-fill-mode: forwards;
}

.fill-good {
  background-color: #39CCCC; 
  color: #fff;
  border: 1px solid #fff;
}

.fill-good:hover {
  color: #fff;
  border: 1px solid #fff;
}

.active {
  color: #61D6D6 !important;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

<div style="padding: 100px; float: left;">

<a class="hvr-ripple-out-good"><i class="fas fa-check"></i></a>

</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：3)

有一些很好的方法可以做这样的事情。也就是说，我建议使用除内联onclick属性之外的其他内容。

在此解决方案中，我使用jQuery并将动画添加到CSS的边框。这样可以使边界出现逐季度  根据您的OP和其他评论。您可以使用动画关键帧来使边框显示在三分之一处，使其更厚等等。

修改：我通过添加animation-fill-mode CSS属性并插入＆＃34;已填充＆＃34;来保留边框。动画中每个关键帧的边框段。

希望这有帮助！

＆＃13;
＆＃13; 
$('.btn').on('click', function() {
  $(this).addClass('test_skill');
  $(this).on('oanimationend webkitAnimationEnd msAnimationEnd animationend', function() {
    //$(this).removeClass('test_skill');
  });
})
＆＃13; 
body {
  background-color: #575757;
}

.btn {
  margin: 10px;
  display: block;
  opacity: 0.6;
  border: none;
  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 {
  animation: border .5s;
  animation-fill-mode: forwards;
}

@keyframes border {
  0% {
    border-top: 0px;
  }
  25% {
    border-top: 2px solid red;
    border-right: 0px;
  }
  50% {
    border-top: 2px solid red;
    border-right: 2px solid red;
    border-bottom: 0px;
  }
  75% {
    border-top: 2px solid red;
    border-right: 2px solid red;
    border-bottom: 2px solid red;
    border-left: 0px;
  }
  100% {
    border-top: 2px solid red;
    border-right: 2px solid red;
    border-bottom: 2px solid red;
    border-left: 2px solid red;
  }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!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">
    <button class="btn"><i class="fas fa-flag fa-inverse"></i></button>
  </div>

  <button class="btn"></button>

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：3)

这很简单，只能用css实现。不需要为这个简单的任务使用脚本，因为这会使应用程序变得繁重，如果用户在浏览器中禁用了JS，它甚至都无法工作。

请查看以下代码，以显示点击边框（适用于桌面设备）和焦点（适用于触控设备）。

<!DOCTYPE html>
<html>

<head>
  <style>
    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;
    }
    /*   Show border on all buttons     */
    
    .btn:active,
    .btn:focus {
      border: 2px solid red;
    }
    
    .fas {
      font-size: 28px;
    }
    /*   
         * Remove comment for section below to Show border on specific button.
         */
    /*
                #skill_unlocked:active,
                #skill_unlocked:focus {
                    border: 2px solid red;
                }
        */
  </style>
</head>

<body>
  <!DOCTYPE html>
  <html>

  <head>
    <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" onclick="myFunction()" id="skill_unlocked"><i class="fas fa-flag fa-inverse"></i></button>
    <button class="btn"></button>
  </body>

  </html>
</body>

</html>

回答奖金问题

在这种情况下，结构不是问题。但是，如果您想在<i>

中的元素上创建链接，最好在<a>内使用<i>

答案 5 :(得分：2)

可能最好用纯粹的CSS使用：active selector。

.btn:active {
   border: 5px solid red;
}

Example JSFiddle

答案 6 :(得分：1)

Theres 2问题： 1）您是否正在调用函数setAttribute来添加类。 2）结构没有多大意义，因为你试图添加的类没有任何样式，所以你可以删除

为了使它工作，你可以这样做： 将click和id属性添加到btn，如下所示：

 <button class="btn" id="skill_unlocked" onclick="myFunction()">

并删除边框attr，如下所示：

document.getElementById("btn").style.border = "none";

如果你想添加一个类，你应该这样做（但这不会做任何事情）：

document.getElementById("skill_unlocked").classList.add('btn');

或删除一个类（这应该删除所有样式）：

document.getElementById("skill_unlocked").classList.remove('btn');

答案 7 :(得分：1)

$(document).ready(function(){
		   var btn = $('.btn');
		   btn.click(function(){
		      $(btn).css('border','1px solid #000');
		      $(this).css('border','1px solid #f00');
		   })
		})
.btn {
			width: 120px;
			height: 40px;
			display: inline-block;
			outline: none;
		}
		div {
			margin: 5px 0;
		}
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
	<button class="btn"><i class=" fas fa-shipping-fast fa-inverse"></i> Shipping</button>
	<button class="btn"><i class=" fas fa-address-card fa-inverse"></i> Address</button>
	<!-- ici fa-inverse manquant -->
    <button class="btn"><i class=" fas fa-camera-retro"></i> Camera</button>
	<div id="skill_unlocked">
        <button class="btn"><i class="fas fa-flag fa-inverse"></i>Flag</button>
    </div>
	<button class="btn">Button</button>
</body>
</html>

相关问题
最新问题