JavaScript 边框颜色/颜色样式答案

【问题标题】：JavaScript border-color/color stylingJavaScript 边框颜色/颜色样式
【发布时间】：2010-04-12 02:10:04
【问题描述】：

我想使用 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]-->

你能帮我解决这个问题吗？ TIA，丹

【问题讨论】：

标签： javascript colors border-color

【解决方案1】：

应该是：

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

【讨论】：

感谢您的即时回复！我试过这个，但根本没有效果。我可以使用“getElementByID”而不是“getElementByClass”吗，因为我认为这可能会导致问题？如果有帮助，那就是“#HCB_comment_box input.submit”……
所以，如果我理解正确，问题是没有为输入和document.getElementByClass('input.submit'); 指定 ID。 document.getElementByClass('submit'); 不行，对吧？

【解决方案2】：

如果元素是由外部 javascript 脚本生成的，则答案会复杂得多。您需要先找到元素，因此 by 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查找：

如果您使用以下内容，您可以通过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')，这样就不必遍历页面上的每个元素。

【讨论】：

现在越来越清晰了。我会为输入添加一个 ID，然后使用 document.getElementById 方法，但输入本身是由外部 JS 脚本创建的。因此，我将不得不尝试替代解决方案。谢谢，大卫！
另一个思路：不可以先给输入附加一个ID（使用JS），然后通过document.getElementById调用吗？
@Dan：增加了一个更快的选项，但是你需要在设置id之前找到元素，所以它可能不值得，除非你需要再次使用document.getElementById访问它跨度>
非常感谢，大卫。我想我会搞定的……再见。