如何使用javascript设置活动元素的样式[重复]

Question

我可以使用 CSS 来设置元素的样式，以便它在活动时改变外观。例如：

.test:active { 
    background-color: yellow;
}

但是，如果我想将其应用于特定元素而不是按类，我该如何在 javascript 中执行此操作？我可以使用以下方法设置默认状态的背景颜色：

document.getElementById("myid").style.backgroundColor = "yellow"

但我不能这样做：

document.getElementById("myid").style.active.backgroundColor = "yellow"

我不希望 javascript 响应元素是否处于活动状态 - 我想在 javascript 中进行静态初始化，然后使特定元素在活动时具有不同的颜色。

如果保证元素有一个 id，我可以使用 javascript 附加一个使用 #id 选择器的样式表规则，但我没有这个保证。我可以确定的是，我将获得一个元素的引用，并且我需要设置它的样式，以便它在活动时具有不同的颜色。

Answer 1

您可以对特定元素使用事件侦听器。

定义元素时，试试这个。您当然可以将其设为按钮或其他任何东西：

<!-- in this case, using 'this' will refer to the element at hand. this way the element is targeted even if it has no ID or class -->
<input onfocus="elemFocused(this)" onblur="elemBlurred(this)">

这使得当您聚焦元素（使其处于活动状态）时，它会运行聚焦功能。当它模糊时（您选择不同的输入或其他东西），它会运行模糊功能。在javascript中：

function elemFocused(element){
    element.style.backgroundColor = 'yellow'; // sets BG color to yellow
}
function elemBlurred(element){
    element.style.backgroundColor = 'initial';// sets BG color to default; you can change if needed
}

Answer 2

我不确定您是否可以直接以编程方式访问 ':active' 样式，但您确实可以访问活动事件，因此您可以通过以下方式复制它：

在您的 CSS 中添加一个 CSS 类来处理您的活动状态，例如：

.active{
  background-color: red;
}

然后只需在该事件上添加类：

document.getElementById("myid").onfocus = function(){
  this.className += "active";
};

document.getElementById("myid").onblur = function(){
  this.className = "/*replace this with the original classes*/";
};