JavaScript的邊框顏色/顏色樣式

Question

我想樣式'input.submit'的形式（懸停效果爲IE）使用JS，並嘗試以下不幸的工作。

<!--[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，丹

Answer 1

答案要複雜得多，如果由一個外部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：

您可以通過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')，因此它不必瀏覽頁面上的每個元素。

Answer 2

它應該是：

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