Question

在浏览MDN时遇到此问题。我试图理解为什么脚本B和C不起作用。

HTML：

<p>Some paragraph text</p>
<h1>some heading 1 text</h1>
<h2>some heading 2 text</h2>

<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">16</a>

CSS

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
}

h1 {
  font-size: 1.5em;
}
h2 {
  font-size: 1.2em;
}

A]正常工作的JS脚本↓↓↓

document.getElementById('size-12').onclick = function() {
    document.body.style.fontSize = '12px';
};
document.getElementById('size-14').onclick = function() {
    document.body.style.fontSize = '14px';
};
document.getElementById('size-16').onclick = function() {
    document.body.style.fontSize = '16px';
};

B]不起作用的JS脚本↓↓↓

function makeSizer(size) {
    document.body.style.fontSize = size + 'px';
}

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

C] JS脚本也不起作用↓↓↓

function makeSizer(size) {
    document.body.style.fontSize = size + 'px';
}

document.getElementById('size-12').onclick = makeSizer(12);
document.getElementById('size-14').onclick = makeSizer(14);
document.getElementById('size-16').onclick = makeSizer(16);

这是一个小提琴：https://jsfiddle.net/vnkuZ/7726/

Answer 1

B]不起作用的原因是当你执行var size12 = makeSizer(12);时，实际上不会将函数makeSizer（大小属性为12）分配给size12但实际调用makeSizer（12）并存储该函数的响应（在这种情况下未定义为函数返回任何内容）。

同样的事情发生在C]，它也会将undefined分配给onclick。

为了达到你想要的效果，你可以做到以下几点。

＆＃13;

var makeSizer=function(size) {
    document.body.style.fontSize = size+'px';
    //console.log(size);
}

document.getElementById('size-12').onclick = function(){makeSizer(12);}
document.getElementById('size-14').onclick = function(){makeSizer(14);}
document.getElementById('size-16').onclick = function(){makeSizer(16);}

＆＃13;

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
}

h1 {
  font-size: 1.5em;
}
h2 {
  font-size: 1.2em;
}

＆＃13;

<p>Some paragraph text</p>
<h1>some heading 1 text</h1>
<h2>some heading 2 text</h2>

<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">16</a>

＆＃13;

纯JS交互式文本大小按钮

1 个答案: