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]-->

你可以帮我解决这个问题吗？ TIA，Dan

Answer 1

应该是：

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

Answer 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')，这样就不必遍历页面上的每个元素。

JavaScript边框颜色/颜色样式

2 个答案: