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

虽然两者都有效，但我只推荐使用javascript方法，如果你要更改div的物理外观以外的东西。

---编辑以下评论---

<强> FOCUS

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

如何在焦点上更改完整div的边框颜色？

2 个答案: