JavaScript 边框颜色/颜色样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2619515/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript border-color/color styling
提问by Dan
I'd like to style 'input.submit' of a form (hover effect for IE) using JS and tried the following which doesn't work unfortunately.
我想使用 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]-->
Could you please fix this for me? TIA, Dan
你能帮我解决这个问题吗？蒂亚，丹
采纳答案by cryo
The answer is considerably more complicated if the elements are generated by an external javascript script. You'll need to find the element first, so the by idand classapproaches won't work unless they already have one - see the typesolution below.
如果元素是由外部 javascript 脚本生成的，则答案要复杂得多。您需要先找到该元素，因此除非它们已经有了，否则byid和class方法将不起作用 - 请参阅type下面的解决方案。
Find by id:
查找方式id：
The following is preferred, you need to add an id to the input submit e.g. <input type="submit" id="submit">to reference it by:
以下是首选，您需要在输入提交中添加一个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';}
but the following should also work:
但以下也应该有效：
Find by class:
查找方式class：
you'll need to specify a class e.g. <input type="submit" class="submit">in this case.
getElementsByClassdoesn't look for the type, it looks for the 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>
Find by type:
查找方式type：
You could find by typeif you use the following:
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')
...
What I would do is:
我会做的是：
<div id="externalElms">
(<script> here)
</div>
then use var foo = getElementByType(document.getElementById('externalElms'), 'submit', 'input')so it doesn't have to go through every element on the page.
然后使用，var foo = getElementByType(document.getElementById('externalElms'), 'submit', 'input')这样它就不必遍历页面上的每个元素。
回答by Max Kramnik
It should be:
它应该是：
foo.onmouseover = function() {
this.style.borderColor='#000000';
this.style.color='#000000';
}
