IE 中的 JavaScript 字体系列问题

发布于 2024-10-09 14:59:24 字数 1297 浏览 3 评论 0原文

有人能想到这在任何版本的 IE 中都不起作用的原因吗？我有一个下拉选择菜单，用于选择元素的字体系列，它调用 javascript 函数来更改字体系列。这是 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。有什么想法吗？我的意思是，这是一个相当简单的功能，我试图想出其他方法来实现它，但我几乎陷入困境。感谢所有阅读本文的人！

原文

Can someone think of a reason that this wouldn't work in any version of IE? I have a drop down select menu for choosing the font family of an element, which calls a javascript function to change the font-family. Here is the 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>

And here is the 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;
    }

This works to change the font family of the element in EVERY browser, minus the dreaded internet explorer. Any thoughts? I mean, it is a fairly straightforward function, I tried to think of other ways to go about it but I'm pretty much stuck. Thank you to all who read this!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

玉环 2024-10-16 14:59:24

如果您调试代码，您会看到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

If you debugged the code you would see that selector.value returns nothing.

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

回复收藏 0 原文

~没有更多了~