Question

我是JavaScript新手。我想添加为访问者添加两个按钮来控制字体大小。我想包含两个标签 - “p”和“blockquote”。你能帮我编辑一下这两个代码吗？

var min = 8;
var max = 18;

function increaseFontSize() {
  var p = document.getElementsByTagName('p');
  for (i = 0; i < p.length; i++) {
    if (p[i].style.fontSize) {
      var s = parseInt(p[i].style.fontSize.replace("px", ""));
    } else {
      var s = 12;
    } if (s != max) {
      s += 1;
    }
    p[i].style.fontSize = s + "px"
  }
}

function decreaseFontSize() {
  var p = document.getElementsByTagName('p');
  for (i = 0; i < p.length; i++) {
    if (p[i].style.fontSize) {
      var s = parseInt(p[i].style.fontSize.replace("px", ""));
    } else {
      var s = 12;
    } if (s != min) {
      s -= 1;
    }
    p[i].style.fontSize = s + "px"
  }
}

谢谢。

Answer 1

而不是使用：

p = document.getElementsByTagName('p');

你可以改为使用：

elems = document.querySelectorAll('p, blockquote');

（变量名称无关紧要，仅因为元素不再是<p>个元素而被更改：

function increaseFontSize() {
  var elems = document.querySelectorAll('p, blockquote');
  for (i = 0; i < elems.length; i++) {
    if (elems[i].style.fontSize) {
      var s = parseInt(elems[i].style.fontSize.replace("px", ""));
    } else {
      var s = 12;
    } if (s != max) {
      s += 1;
    }
    elems[i].style.fontSize = s + "px"
  }
}

＆＃13;

var min = 8;
var max = 18;

function increaseFontSize() {
  var elems = document.querySelectorAll('p, blockquote');
  for (i = 0; i < elems.length; i++) {
    if (elems[i].style.fontSize) {
      var s = parseInt(elems[i].style.fontSize.replace("px", ""));
    } else {
      var s = 12;
    } if (s != max) {
      s += 1;
    }
    elems[i].style.fontSize = s + "px"
  }
}

function decreaseFontSize() {
  var elems = document.querySelectorAll('p, blockquote');
  for (i = 0; i < elems.length; i++) {
    if (elems[i].style.fontSize) {
      var s = parseInt(elems[i].style.fontSize.replace("px", ""));
    } else {
      var s = 12;
    } if (s != min) {
      s -= 1;
    }
    elems[i].style.fontSize = s + "px"
  }
}

document.querySelector('#increase').addEventListener('click', increaseFontSize);


document.querySelector('#decrease').addEventListener('click', decreaseFontSize);

＆＃13;

<button id="increase">&uarr;A</button>
<button id="decrease">A&darr;</button>
<p>Some text to have its text adjusted by the buttons just up there.</p>

<blockquote>Some text in a blockquote</blockquote>

＆＃13;

querySelectorAll()方法接受CSS样式选择器，并返回（非实时）NodeList，并且在所有现代浏览器中都受支持，包括从版本8开始的IE。

也就是说，增加font-size元素的<body>可能更好，否则字体调整是多余的（因为其他元素仍然不清楚），所以，相反，我建议：

function increaseFontSize() {
  // retrieving, and caching, the <body> element:
  var body = document.body,
      // finding the current computed fontSize of the <body> element, parsing it
      // as a float (though parseInt() would be just as safe, really):
      currentFontSize = parseFloat(window.getComputedStyle(body, null).fontSize);

  // if the currentFontSize is less than the specified max:
  if (currentFontSize < max) {
    // we set the fontSize of the <body> to the incremented fontSize,
    // increasing the current value by 1, and concatenating with the 'px' unit:
    body.style.fontSize = ++currentFontSize + 'px';
  }
}

function decreaseFontSize() {
  var body = document.body,
      currentFontSize = parseFloat(window.getComputedStyle(body, null).fontSize);

  if (currentFontSize > min) {
    body.style.fontSize = --currentFontSize + 'px';
  }
}

＆＃13;

var min = 8;
var max = 18;

function increaseFontSize() {
  var body = document.body,
      currentFontSize = parseFloat(window.getComputedStyle(body, null).fontSize);
  
  if (currentFontSize < max) {
    body.style.fontSize = ++currentFontSize + 'px';
  }
}

function decreaseFontSize() {
  var body = document.body,
      currentFontSize = parseFloat(window.getComputedStyle(body, null).fontSize);
  
  if (currentFontSize > min) {
    body.style.fontSize = --currentFontSize + 'px';
  }
}

document.querySelector('#increase').addEventListener('click', increaseFontSize);


document.querySelector('#decrease').addEventListener('click', decreaseFontSize);

＆＃13;

<button id="increase">&uarr;A</button>
<button id="decrease">A&darr;</button>
<p>Some text to have its text adjusted by the buttons just up there.</p>

<blockquote>Some text in a blockquote</blockquote>

＆＃13;

参考文献：

Answer 2

这是一个有效的版本：

http://jsfiddle.net/ny4p7pg9/

我冒昧地重构了一些函数，使代码更具参数化。

function changeFontSize(delta) {
  var tags = document.querySelectorAll('p,blockquote');
  for (i = 0; i < tags.length; i++) {
    if (tags[i].style.fontSize) {
      var s = parseInt(tags[i].style.fontSize.replace("px", ""));
    } else {
      var s = 12;
    } if (s != max) {
      s += delta;
    }
    tags[i].style.fontSize = s + "px"
  }
}

function increaseFontSize() {
  changeFontSize(1);
}

function decreaseFontSize() {
  changeFontSize(-1);
}

JavaScript增加和减少字体大小

2 个答案: