JavaScript border-color/color styling

Question

JS를 사용하여 양식의 'input.submit'스타일을 지정하고 싶습니다. 불행히도 작동하지 않는 다음을 시도해보십시오.

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

대답은 훨씬 더 복잡하다. 먼저 요소를 찾아야하므로 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을 찾습니다.

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> 

후 사용

<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에서 찾을 수 var foo = getElementByType(document.getElementById('externalElms'), 'submit', 'input') 페이지의 모든 요소를 ​​거칠 필요가 없습니다.

Answer 2

그것은해야한다 : 요소가 자바 스크립트 스크립트 외부에 의해 발생하는 경우

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