Question

有人会想到这个在任何版本的IE中无效的原因吗？我有一个下拉选择菜单，用于选择元素的字体系列，它调用javascript函数来更改font-family。这是html ...

 <select id="selecth1FontFamily" name="selectFontFamily" onchange="updateh1family();">
                                  <option> Serif </option>
                                  <option> Arial </option>
                                  <option> Sans-Serif </option>                                  
                                  <option> Tahoma </option>
                                  <option> Verdana </option>
                                  <option> Lucida Sans Unicode </option>                               
                              </select>

这是JavaScript ......

function updateh1family() {

        var selector = document.getElementById('selecth1FontFamily');
        var cssPreviewSpan = document.getElementById('h1FontFamily');

        cssPreviewSpan.innerHTML = selector.value;
        // also update the CSS preview

        var h1 = document.getElementById('liveh1')
        h1.style.fontFamily =  selector.value;
    }

这可以改变每个浏览器中元素的字体系列，减去可怕的Internet Explorer。有什么想法吗？我的意思是，这是一个相当简单的功能，我试着考虑其他方法来解决它，但我几乎陷入困境。感谢所有阅读此内容的人！

Answer 1

如果您调试了代码，您会看到selector.value什么都不返回。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <h1 id="liveh1">Some text</h1>
  <select id="selecth1FontFamily" name="selectFontFamily" onchange="updateh1family();">
    <option> Serif </option>
    <option> Arial </option>
    <option> Sans-Serif </option>                                  
    <option> Tahoma </option>
    <option> Verdana </option>
    <option> Lucida Sans Unicode </option>                               
  </select>
    <script>
      function updateh1family() {
        var selector = document.getElementById('selecth1FontFamily');
        var family = selector.options[selector.selectedIndex].value;
        var h1 = document.getElementById('liveh1')
        h1.style.fontFamily = family;        
      }

    </script>
</body>
</html>

JSBin

IE中的JavaScript字体系列问题

1 个答案: