添加/替换带有点击的边框

初学者在这里，

我目前正在尝试每次单击按钮时在按钮周围显示边框。

边界将以相同的onclick="myFunction()逐季度(或 1/3(出现。我不明白。如何在不使用新的 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

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和 IDskill_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 集合，因此您需要遍历它们，并为每个元素添加一个事件处理程序。从这里，您可以使用 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>

这是我支付的一些代码。我认为它符合您的要求，但在悬停时而不是单击。不完全是你需要的，但也许有一些想法。

$( ".hvr-ripple-out-good" ).click(function() {
$( this ).toggleClass( "fill-good" );
});

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

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

这很简单，你只能用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>

奖金问题的答案

在您这里的情况下，结构不是问题。但是，如果要在元素上创建链接，最好在<a>中使用<i><i>

使用此函数

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

可能最好用纯CSS和：active选择器将其淘汰。

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

示例 JSFiddle

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

在此解决方案中，我使用了jQuery并在边框中添加了一个动画CSS.这给出了边框逐季度显示的效果根据您的 OP 和其他评论。您可以使用动画关键帧来使边框以三分之一显示，使其更粗等。

编辑：我通过添加动画填充模式CSS属性并在动画中的每个关键帧处插入"填充"边框段来保留边框。

希望这有帮助！

$('.btn').on('click', function() {
$(this).addClass('test_skill');
$(this).on('oanimationend webkitAnimationEnd msAnimationEnd animationend', function() {
//$(this).removeClass('test_skill');
});
})

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;
}
}

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

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

要使其工作，您可以这样做：将点击时和 ID 属性添加到 BTN 中，如下所示：

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

并像这样删除边框属性：

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

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

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

或者删除一个类(这应该删除所有样式(：

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

$(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>

相关内容

最新更新

热门标签：