聚焦时如何更改整个div的边框颜色？

Question

我是开发新手，所以这可能是一个简单的答案。 我试图弄清楚在焦点/活动时如何更改整个div的边框颜色。 我可以更改文本框的边框，但这似乎是我可以找到的唯一答案。 任何帮助表示赞赏。 谢谢！

Answer 1

在您的css文件中。

div:focus {
    border: 1px solid black;
}

div:active {
    border: 1px solid black;
}

您可以将“黑色”更改为您喜欢的任何颜色。

Answer 2

CSS版本

div:focus {
  border: 1px solid black;
}

div:active {
  border: 1px solid black;
}

Javascript版本

//doSomething is the name of the function to get fired
    document.getElementById("myDiv").addEventListener("focus", doSomething);

//whatIsActive will return the element type that is active at the moment
    var whatIsActive = document.activeElement;

http://www.w3schools.com/jsref/prop_document_activeelement.asp

尽管两者都有效，但仅在更改div物理外观以外的其他内容时，我才建议您使用javascript方法。

-编辑以下评论-

焦点

//listens for focus on textbox
document.getElementById('myTextbox').addEventListener("focus", changeDivColor);

//this is fired when the textbox is focused
function changeDivColor(){
  document.getElementById('myDiv').style.borderColor = "red";
}

BLUR（取消选择）

//listens for blur on textbox
 document.getElementById('myTextbox').addEventListener("blur", revertDivColor);

//this is fired when the textbox is no longer focused
function revertDivColor(){
  document.getElementById('myDiv').style.borderColor = "black";
}

查看实际操作： https ： //jsfiddle.net/0h8zyhba/1/