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
style
object won't have values that are applied via stylesheets; to get those, on a standards-compliant browser you usegetComputedStyle
. (On older IE, you use thecurrentStyle
property.)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屋!