Javascript 选择时如何更改div的轮廓颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26531663/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change a div's outline color when selected?
提问by UI_Dev
I need to change the outline color when the div is selected. I have tried by using the same technique as hover (shown below), but I need help with a selector. Is it possible via JavaScript or is CSS enough?
选择 div 时，我需要更改轮廓颜色。我尝试过使用与悬停相同的技术（如下所示），但我需要选择器方面的帮助。是否可以通过 JavaScript 或 CSS 来实现？
Here is what I tried:
这是我尝试过的：
div {
background: #ccc;
margin: 20px;
}
div:hover {
outline: 1px solid blue;
}<div>1</div>
<div>2</div>
<div>3</div>回答by Oriol
回答by Oriol
As I said in my other answer, you can use :focuspseudo-class.
正如我在其他答案中所说，您可以使用:focus伪类。
But there is a problem: it won't work if the elements contain other focusable elements.
但是有一个问题：如果元素包含其他可聚焦元素，它将不起作用。
However, it can be fixed using JS events:
但是，它可以使用 JS 事件修复：
var els = document.body.children;
for(var i=0; i<els.length; ++i) {
els[i].addEventListener('focus', focus, true);
els[i].addEventListener('blur', blur, true);
}
function focus() {
this.classList.add('focus');
}
function blur() {
this.classList.remove('focus');
}div {
background: #ccc;
margin: 20px;
}
div:focus, div.focus { /* :focus is a fallback in case JS is disabled */
outline: 1px solid blue;
}<div tabindex="-1">
1
<input />
</div>
<div tabindex="-1">2</div>
<div tabindex="-1">3</div>Note that in the code above I used capture phase because focusand blurdon't bubble.
注意，在上面的代码我用来捕捉阶段，因为focus并blur没有泡沫。
Alternatively, focusinand focusoutcould be used instead, but be aware Firefox doesn't support them yet (but they will work if you use jQuery).
另外，focusin并且focusout可以用来代替，但要知道Firefox不支持他们，但（但如果你使用jQuery他们将工作）。
$('body > div').on('focusin', function() {
$(this).addClass('focus');
}).on('focusout', function() {
$(this).removeClass('focus');
});div {
background: #ccc;
margin: 20px;
}
div:focus, div.focus { /* :focus is a fallback in case JS is disabled */
outline: 1px solid blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div tabindex="-1">
1 <input />
</div>
<div tabindex="-1">2</div>
<div tabindex="-1">3</div>回答by UI_Dev
Another approach using CSS:
使用 CSS 的另一种方法：
input:active,
input:focus,
textarea:active,
textarea:focus,
select:active,
select:focus {
outline: 1px solid blue;
}
回答by Ari Waisberg
Have you tried using events?
您是否尝试过使用事件？
function selected(pDiv) {
$("#div" + pDiv).attr("style", "border-style: solid");
// Here write a For Loop to put "border-style: none" to everyone else
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div1" onclick="selected(1)">1</div>
<div id="div2" onclick="selected(2)">2</div>
<div id="div3" onclick="selected(3)">3</div>Let me know if it worked...
让我知道它是否有效...
回答by Naelson Gon?alves Saraiva
/*
Fix select next previuos selected
Fix duplicate clicks diselect
*/
var valuesOld = new Array();
var num = 0;
function selected(pDiv) {
num = num +1;
valuesOld[num] = pDiv;
console.log("Key"+num+"Value="+valuesOld[num]);
$("#div" + pDiv).css("border-left", " 1px solid rgb(133, 189,147)");
if(valuesOld[2] > 0 && valuesOld[1]> 0){
$("#div" + valuesOld[num-1]).css("border-left", " 1px solid rgb(221, 84, 84)");
}
if(pDiv == valuesOld[num]){
$("#div" + pDiv).css("border-left", " 5px solid rgb(133, 189, 147)");
}
}div{
border-left: 1px solid rgb(221, 84, 84);
margin-top: 2px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div onclick="selected(1)" id="div1">1</div>
<div onclick="selected(2)" id="div2">2</div>
<div onclick="selected(3)" id="div3">3</div>回答by Michele La Ferla
all you need to use focusinstead of hover. The :focus selector is used to select the element that has focus. It is allowed on elements that accept keyboard events or other user inputs.
所有你需要使用的focus而不是hover. :focus 选择器用于选择具有焦点的元素。允许在接受键盘事件或其他用户输入的元素上使用。
The difference between the two elements is that the hoverevent listens for the position of the mouse in relation to the web page, while the focusevent listens for the selected item in the page.
这两个元素的区别在于hover事件监听鼠标相对于网页的位置，而focus事件监听页面中的选定项。
So your code could look something like this:
所以你的代码可能是这样的：
div {
background: #ccc;
margin: 20px;
}
div:focus {
outline: 1px solid blue;
}<div tabindex="-1">1</div>
<div tabindex="-1">2</div>
<div tabindex="-1">3</div>