JavaScript onclick（）文本大小随EventListener增加 [英] JavaScript onclick() text size increase with EventListener
问题描述
我正在尝试实现以下操作以基于按钮单击来增加文本大小。我正在尝试为此使用一个处理程序。想法是将演示区域中的文本的字体大小增加/减少+/- 5像素。但是我没有得到期望的结果。
< html> < body> < p>更改字体大小< / p> < div id = main_area1> < button id = button1 value =较大 type = button onclick = changeFontSize（this）>较大< / button> < / div> < div id = main_area2> < button id = button2 vale = smaller type = button onclick = changeFontSize（this）> Smaller< / button> < / div> < div> < p id = demo> HOW_BIG_OR_SMALL_AM_I< / p> < / div> < script>函数changeFontSize（target）{如果（target == document.getElementById（ button1））{document.getElementById（ demo）。style.fontSize = document.getElementById（ demo）。style.fontSize + 5px ; }否则if（target == document.getElementById（ button2））{document.getElementById（ demo）。style.fontSize = document.getElementById（ demo）。style.fontSize + -5px; }}< / script> < / body>< / html>
在开发人员控制台中，我看到我的目标与button1具有相同的值。但是我看不到字体大小的增加（对于button2也是一样）。
我试图尽我最大的努力使用Java知识，但是却一无所获。我认为我可能使用了错误的元素ID或未正确注册处理程序。
任何帮助或建议都值得赞赏！谢谢。
几点：
-
样式对象将没有通过样式表应用的值；要获取这些内容，请在符合标准的浏览器上使用getComputedStyle。 （在较旧的IE上，您使用currentStyle属性。） -
您需要解析自己的值
-
每次发现自己一遍又一遍地重复写同一件事时，请考虑是否重复一次并记住它。
这可以在符合标准的浏览器上实现窍门，并且也可以在较旧的IE上运行：
函数changeFontSize（target）{var demo = document.getElementById（ demo）; var computeStyle = window.getComputedStyle吗？ getComputedStyle（demo）//标准：demo.currentStyle; //旧版IE var fontSize; if（computedStyle）{//几乎在所有浏览器上都是true fontSize = parseFloat（computedStyle&& computeStyle.fontSize）;如果（target == document.getElementById（ button1））{fontSize + = 5; } else if（target == document.getElementById（ button2））{fontSize-= 5; } demo.style.fontSize = fontSize + px; }}
< p>更改字体大小< / p> ;< div id = main_area1> < button id = button1 value =较大 type = button onclick = changeFontSize（this）>较大< / button>< / div>< div id = main_area2> < button id = button2 vale = smaller type = button onclick = changeFontSize（this）> Smaller< / button>< / div>< div> < p id = demo> HOW_BIG_OR_SMALL_AM_I< / p>< / div>
I am trying to implement the following to increase text size based on button click. I am trying to use one handler for this. The idea is to increase/decrease the fontsize for the text in "demo" area by +/-5 px. But I am not getting the desired result.
<html>
<body>
<p>Change font size</p>
<div id="main_area1">
<button id="button1" value="larger" type="button" onclick="changeFontSize(this)">Larger</button>
</div>
<div id="main_area2">
<button id="button2" vale="smaller" type="button" onclick="changeFontSize(this)">Smaller</button>
</div>
<div>
<p id="demo">HOW_BIG_OR_SMALL_AM_I</p>
</div>
<script>
function changeFontSize(target) {
if (target == document.getElementById("button1")) {
document.getElementById("demo").style.fontSize = document.getElementById("demo").style.fontSize + "5px";
} else if (target == document.getElementById("button2")) {
document.getElementById("demo").style.fontSize = document.getElementById("demo").style.fontSize + "-5px";
}
}
</script>
</body>
</html>
When I checked it in developers console, I see that my target has the same value as button1. But I cannot see the font size increasing (same is true for button2).
I tried to use my java knowledge as much as I can, but not getting anywhere. I think I might be using the wrong element Id or I am not registering the handler correctly.
Any help or kind suggestion is appreciated ! Thanks.
A couple of points:
The
styleobject won't have values that are applied via stylesheets; to get those, on a standards-compliant browser you usegetComputedStyle. (On older IE, you use thecurrentStyleproperty.)You need to parse the value you get, because it's a string.
Any time you find yourself repeatedly writing the same thing over and over, consider whether to do it once and remember it in a variable.
This does the trick on standards-compliant browsers and should work on older IE as well:
function changeFontSize(target) {
var demo = document.getElementById("demo");
var computedStyle = window.getComputedStyle
? getComputedStyle(demo) // Standards
: demo.currentStyle; // Old IE
var fontSize;
if (computedStyle) { // This will be true on nearly all browsers
fontSize = parseFloat(computedStyle && computedStyle.fontSize);
if (target == document.getElementById("button1")) {
fontSize += 5;
} else if (target == document.getElementById("button2")) {
fontSize -= 5;
}
demo.style.fontSize = fontSize + "px";
}
}
<p>Change font size</p>
<div id="main_area1">
<button id="button1" value="larger" type="button" onclick="changeFontSize(this)">Larger</button>
</div>
<div id="main_area2">
<button id="button2" vale="smaller" type="button" onclick="changeFontSize(this)">Smaller</button>
</div>
<div>
<p id="demo">HOW_BIG_OR_SMALL_AM_I</p>
</div>
这篇关于JavaScript onclick（）文本大小随EventListener增加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
