0

我是 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

任何帮助，将不胜感激！

4

3 回答 3

2

我要写给你最干净的答案：

CodePen 解决方案

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

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

编辑：对于不想要 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;

}());
于 2013-09-24T19:41:46.457 回答
1

您正在尝试调用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它不是跨浏览器。我建议使用jQueryandon方法而不是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>
于 2013-09-24T19:18:57.553 回答
0

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

<script>
function getItem(a) { return document.getElementById(a); }
</script>
于 2013-09-24T19:20:42.810 回答