JavaScript鼠标移入和移出时的边框颜色/颜色样式未生效

Question

我想使用JS为表单的“input.submit”样式添加悬停效果（适用于IE），尝试了下面的方法，但不幸没有成功。

<!--[if IE]>
<script type="text/javascript">

// CHANGE SUBMIT STYLE
var foo = document.getElementByClass('input.submit');
foo.onmouseover = this.style.border-color='#000000'; this.style.color='#000000';
foo.onmouseout = this.style.border-color='#888888'; this.style.color='#888888';
foo.onclick = this.style.border-color='#000000'; this.style.color='#000000';

</script>
<![endif]-->

如何修复这个问题以使其正常工作？

- Dan

Answer 1

应该是：

foo.onmouseover = function() {
    this.style.borderColor='#000000'; 
    this.style.color='#000000';
}

- Max Kramnik

---

谢谢您的即时回复！我已经尝试过这个方法，但是没有任何效果。我可以使用 'getElementByID' 替换 'getElementByClass' 吗？因为我认为这可能会导致问题。如果有帮助的话，它是 '#HCB_comment_box input.submit'... - Dan

所以，如果我理解你的问题正确，问题在于输入框没有指定ID，因此 document.getElementByClass('input.submit'); 或者 document.getElementByClass('submit'); 无法工作，对吗？ - Dan

Answer 2

如果元素是由外部JavaScript脚本生成的，则答案会更加复杂。你需要首先找到该元素，因此按id和class查找方法不起作用，除非它们已经有一个 - 请参见下面的type解决方案。

按id查找： 建议使用以下代码，需要向输入提交添加一个id，例如：<input type="submit" id="submit">以便可以引用它。

// CHANGE SUBMIT STYLE
var foo = document.getElementById('submit');
foo.onmouseover = function() {this.style.borderColor='#000000'; this.style.color='#000000';}
foo.onmouseout = function() {this.style.borderColor='#888888'; this.style.color='#888888';}
foo.onclick = function() {this.style.borderColor='#000000'; this.style.color='#000000';}

但是以下方法也应该有效：

通过class查找：

你需要指定一个类，例如 <input type="submit" class="submit"> 在这种情况下。 getElementsByClass 不会查找 type，它只会查找 class。

<script type="text/javascript">

function getElementsByClass(node,searchClass,tag) {
  var classElements = new Array();
  var els = node.getElementsByTagName(tag);
  var elsLen = els.length;
  var pattern = new RegExp("\b"+searchClass+"\b");
  for (i = 0, j = 0; i < elsLen; i++) {
    if ( pattern.test(els[i].className) ) {
      classElements[j] = els[i];
      j++;
    }
  }
return classElements;
}

// CHANGE SUBMIT STYLE
var foo = getElementsByClass(document.body, 'submit', 'input')[0];
foo.onmouseover = function() {this.style.borderColor='#000000'; this.style.color='#000000';}
foo.onmouseout = function() {this.style.borderColor='#888888'; this.style.color='#888888';}
foo.onclick = function() {this.style.borderColor='#000000'; this.style.color='#000000';}

</script>

按类型查找：

如果您使用以下方式，则可以按 type 查找：

function getElementByType(node,type,tag) {
  var els = node.getElementsByTagName(tag);
  for (var x=0, x<els.length; x++) {
    if (els[x].type && els[x].type.toLowerCase() == type) {
      return els[x]
    }
  }
}
var foo = getElementByType(document.body, 'submit', 'input')
...

我会做的是：

<div id="externalElms">
    (<script> here)
</div>

然后使用var foo = getElementByType(document.getElementById('externalElms'), 'submit', 'input')，这样它就不必遍历页面上的每个元素。

- cryo

---

现在情况变得更清晰了。我本来会为输入添加一个ID，然后使用document.getElementById方法，但是输入本身是由外部JS脚本创建的。因此，我将尝试另一种解决方案。谢谢，David！ - Dan

另一个想法：是否可以先使用JS将ID附加到输入上，然后通过document.getElementById调用它？ - Dan

@Dan：添加了更快的选项，但在设置“id”之前需要找到元素，因此除非您需要使用“document.getElementById”再次访问它，否则可能不值得。 - cryo

非常感谢，David。我想我会开始着手处理这个...再见。 - Dan