Question

我是javascript的初学者，我（经许可）建立一个网站来主持我喜欢的业余作者的故事。我正在尝试在屏幕顶部添加一对下拉框，可以调整本章的文本大小和字体系列。下拉是有的，我在章节文本周围放置了一个div容器，但字体没有改变。这是适用的代码：

Font:&nbsp;&nbsp;<select name='fontface' onchange="var ftxt = getItem('fluidtext'); if(ftxt)ftxt.style.fontFamily = this.options[this.selectedIndex].value;">
<option value='Helvetica' selected='selected'>Helvetica</option>
<option value='Verdana'>Verdana</option>
<option value='Times New Roman'>Times New Roman</option>
<option value='Courier New'>Courier New</option>
<option value='Georgia'>Georgia</option>
</select>

<select name='fontsize' onchange="var ftxt = getItem('fluidtext'); if(ftxt)ftxt.style.fontSize = this.options[this.selectedIndex].value;">
<option value='8pt'>8pt</option>
<option value='10pt'>10pt</option>
<option value='12pt' selected='selected'>12pt</option>
<option value='14pt'>14pt</option>
<option value='16pt'>16pt</option>
<option value='18pt'>18pt</option>
<option value='24pt'>24pt</option>
<option value='32pt'>32pt</option>
<option value='40pt'>40pt</option>
<option value='48pt'>48pt</option>
<option value='60pt'>60pt</option>
<option value='75pt'>75pt</option>
<option value='90pt'>90pt</option>
</select>

我在章节开始的页面下方添加了“div id ='fluidtext'”，在章节末尾添加了“/ div”。除了偶尔的粗体和斜体标签之外，故事章节中没有内联代码。页面使用外部CSS样式表进行格式化。

可在此处找到完整页面（减去CSS格式）： https://dl.dropboxusercontent.com/u/59191190/tower02.html

任何帮助将不胜感激！

Answer 1

我打算给你最清楚的答案：

CodePen solution

我添加'onkeyup'的原因是由于FireFox在使用键盘导航循环时没有触发'onchange'。

另外，我使用了一个自动执行lambda函数来确保我们不会用我们的fluff变量污染窗口对象。

编辑：对于任何不想使用CodePen解决方案的人

<强> HTML

Font:

<select id="fontface" name='fontface'>
  <option value='Helvetica'>Helvetica</option>
  <option value='Verdana'>Verdana</option>
  <option value='Times New Roman'>Times New Roman</option>
  <option value='Courier New'>Courier New</option>
  <option value='Georgia'>Georgia</option>
</select>

<select id="fontsize" name='fontsize'>
  <option value='8pt'>8pt</option>
  <option value='10pt'>10pt</option>
  <option value='12pt' selected='selected'>12pt</option>
  <option value='14pt'>14pt</option>
  <option value='16pt'>16pt</option>
  <option value='18pt'>18pt</option>
  <option value='24pt'>24pt</option>
  <option value='32pt'>32pt</option>
  <option value='40pt'>40pt</option>
  <option value='48pt'>48pt</option>
  <option value='60pt'>60pt</option>
  <option value='75pt'>75pt</option>
  <option value='90pt'>90pt</option>
</select>

<p id="fluidtext">
  This is my fluid text  
</p>

<强> JS

(function() {
  //Assuming document is ready

  function onFontFaceChange() {
    if(fluidTextNode) fluidTextNode.style.fontFamily = this.options[this.selectedIndex].value;
  }

  function onFontSizeChange() {
    if(fluidTextNode) fluidTextNode.style.fontSize = this.options[this.selectedIndex].value;
  }

  var fontFaceNode = document.getElementById('fontface'),
      fontSizeNode = document.getElementById('fontsize'),
      fluidTextNode = document.getElementById('fluidtext');

  if(fontFaceNode) fontFaceNode.onkeyup = fontFaceNode.onchange = onFontFaceChange;
  if(fontSizeNode) fontSizeNode.onkeyup = fontSizeNode.onchange = onFontSizeChange;

}());

Answer 2

您正在尝试调用未定义的getItem功能。
你需要声明它：

<script>
var getItem = function(item) {
    return document.getElementById(item);
};
</script>

还尝试避免处理DOM属性中的事件。我建议完整的代码如下：

<script>
var getItem = function(item) {
    return document.getElementById(item);
};

getItem('fontface').addEventListener('change', function() {
    var ftxt = getItem('fluidtext');
    if(ftxt)
        ftxt.style.fontFamily = this.options[this.selectedIndex].value;
});

getItem('fontsize').addEventListener('change', function() {
    var ftxt = getItem('fluidtext');
    if(ftxt)
        ftxt.style.fontSize = this.options[this.selectedIndex].value;
});
</script>

Font:&nbsp;&nbsp;
<select id="fontface" name='fontface'>
    <option value='Helvetica' selected='selected'>Helvetica</option>
    <option value='Verdana'>Verdana</option>
    <option value='Times New Roman'>Times New Roman</option>
    <option value='Courier New'>Courier New</option>
    <option value='Georgia'>Georgia</option>
</select>

<select id="fontsize" name='fontsize'>
    <option value='8pt'>8pt</option>
    <option value='10pt'>10pt</option>
    <option value='12pt' selected='selected'>12pt</option>
    <option value='14pt'>14pt</option>
    <option value='16pt'>16pt</option>
    <option value='18pt'>18pt</option>
    <option value='24pt'>24pt</option>
    <option value='32pt'>32pt</option>
    <option value='40pt'>40pt</option>
    <option value='48pt'>48pt</option>
    <option value='60pt'>60pt</option>
    <option value='75pt'>75pt</option>
    <option value='90pt'>90pt</option>
</select>

值得一提的是addEventListener不是跨浏览器。我建议使用jQuery和on方法代替addEventListener。然后整个JS看起来像这样：

<script>
(function( $ ) {
    $(document).ready(function() {
        $('#fontface').on('change', function() {
            var ftxt = $('#fluidtext');
            if(ftxt)
                ftxt.style.fontFamily = this.options[this.selectedIndex].value;
        });

        $('#fontsize').on('change', function() {
            var ftxt = $('#fluidtext');
            if(ftxt)
                ftxt.style.fontSize = this.options[this.selectedIndex].value;
        });
    });
})(jQuery);
</script>

Answer 3

将此添加到您的网页，以便定义缺少的getItem功能：

<script>
function getItem(a) { return document.getElementById(a); }
</script>

使用javascript调整网页的字体

3 个答案: