너와 나의 프로그래밍

JavaScript - IE에서 Selectbox의 Option Text의 Color가 변하지 않을 때 본문

Front-End/JavaScript

JavaScript - IE에서 Selectbox의 Option Text의 Color가 변하지 않을 때

Whatever App's 2019. 4. 26. 11:21

 

SelectBox의 Option의 Text color를 바꾸는 동작을 구현하는 중 IE에서만 Text의 Color가 정상적으로 변경되지 않는 문제가 발생하였다.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script>
window.onload = function(){
var selectbox = document.getElementsByTagName('select')[0];
var options = selectbox.querySelectorAll('option');

document.getElementById('change').addEventListener('click', function(){
for(var i = 0; i < options.length; i++) {
options[i].style.color = 'blue';
}
});

document.getElementById('cancel').addEventListener('click', function(){
for(var i = 0; i < options.length; i++) {
options[i].style.color = 'black';
selectbox.selectedIndex = '-1';
}
})
}
</script>
<body>
<select multiple>
<option>test1</option>
<option>test2</option>
</select>

<button id = "change">Change</button>
<button id = "cancel">Cancel</button>
</body>
</html>

 

위 소스 코드를 보자면...

 

처음 'change' 버튼을 눌렀을 때 option의 Text 색상이 Blue로 바뀌고 다시 'cancel' 버튼을 눌러 Black 색상으로 돌아오는 코드다.

 

타 브라우저는 정상 동작하지만 IE에서만 SelectBox의 focus를 줘야 색상이 바뀌는 아이러니한 현상이 발생하였다...  

 
한 2틀? 3일 정도 찾아봐도, Stackoverflow에 도움을 요청해보고 각종 웹 개발 커뮤니티에도 도움을 요청해 봤지만 해결이 안되는 도중.
 
우연히 selectedIndex속성을 보고 혹시?나 하는 마음에 적용해 봤지만 아주 정상적으로 동작했다.
 
대신 '-1'를 쓴 이유는 기본적으로 0으로 주는 경우가 많지만 나는 딱히 option을 선택하지 않을거라 단지 Selectbox에만 focus를 주도록 하였다.
 
 
 
 
 
 
 
 
 

(IE는 이 세상에서 꼭 사라졌으면 좋겠다.)

 

반응형
저작자표시

'Front-End > JavaScript' 카테고리의 다른 글

JavaScript - 두 배열의 대한 비교 방법  (7) 2021.02.15
JavaScript - 대소문자를 구분하지 않고 검색  (0) 2020.12.29
JavaScript - IE에서 Object.values()를 사용하지 못할 때  (0) 2018.10.15
JavaScript - HTML에 또 다른 HTML Import 하기  (4) 2018.10.11
JavaScript - Textarea 자동 길이 늘리기.  (0) 2018.08.16
'Front-End/JavaScript' Related Articles more