Soulmate
714
2019-04-18 16:55:27
3
252

Option의 글자 색상을 바꾸려고 하는데 문제가 있습니다.



<!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';
            }
        })
    }
</script>
<body>
    <select multiple>
        <option>test1</option>
        <option>test2</option>
    </select>

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


SelectBox안 Option의 글자 색상을 2개의 버튼으로 바꾸려고 합니다.

Edge, FF, Chrome에서는 정상적으로 동작하는데 IE에서는 버튼을 누르면 바로 글자 색상이 바뀌지 않고, 누른 버튼에서 커서를 mouseout 할 때 글자색상이 바뀝니다.

혹시 IE 버그는 아닐지 생각됩니다...

0
0
  • 답변 3

  • 계정세탁
    464
    2019-04-18 17:53:32

    흠, 그러네요. text까지 같이 바꿔주면 바로 적용이 됩니다만... 색상만 바꾸면 바로 안 바뀌는군요.

    0
  • Soulmate
    714
    2019-04-18 17:57:22 작성 2019-04-18 18:04:57 수정됨

    마루한 그러네요;; IE 정말... 신기한건 디버깅툴로 하나씩 찍어서 하면 돌아간다는겁니다;

    0
  • Soulmate
    714
    2019-04-26 11:23:26

    cancel 버튼을 눌렀을 때 selectbox.selectedIndex = '-1'을 줘서 해결하였습니다.

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.