Question

有没有办法更改div背景颜色（突出显示）而无需在每个输入中调用该功能？

这是我的Javascript函数：

<script type="text/javascript">
function highlight(element) {
    element.parentNode.style.backgroundColor = '#FF9900';
}
function removeHighlight(element) {
    element.parentNode.style.backgroundColor = '';
}
</script>

这是HTML：

<div class="form-item">
<label>Title:</label>
<input class="form-text Title"
       type="text"
       onblur="removeHighlight(this);"
       onfocus="this.value='';highlight(this);"
       onselect="this.value='';"
       onclick="this.value='';highlight(this);"
       value="english"
       name="Title">
<input class="form-text translations"
       type="text"
       onselect="this.value='';"
       onclick="this.value='';"
       value="translate"
       name="title_translate">
</div>

这里我必须在每个输入onclick或onselect中调用该函数，这有时会与我页面上的其他Javascript函数冲突。

Answer 1

您可以匿名将其绑定到该特定元素：

document.getElementById('foo').onclick = function() {
  this.parentNode.style.backgroundColor = '#FF9900';
}

但是，你将被迫使用id（比编写相同的onclick代码20次更好）。

如果你使用像jQuery这样的JavaScript库，这个代码可以简化一下：

$('div.form-item input').select(function() {
  $(this).parent().css('background-color', '#FF9900');
});

$('div.form-item input').blur(function() {
  $(this).parent().css('background-color', 'auto');
});

这会照顾{em>所有 <input>中的<div>元素。 HTML中不需要任何内容。这一切都是在JS方面完成的。

没有onclick的Javascript突出显示效果

1 个答案: