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*/";
};

如何使用javascript

2 个答案: