[英]How to let users increase font-size by clicking the text?
I've been trying to figure how to create an idea I had the other day for awhile now and can't seem to get it to work due to being a bit of noob still. 我一直试图弄清楚如何创建我前几天有过一个想法,由于仍然有些菜鸟而似乎无法使它起作用。
Anyway, to the point, I am trying to create as the title says, a paragraph where the user can simply click on the text / paragraph and have the font size increase each time. 无论如何,至此,我正试图按照标题所说创建一个段落,用户可以在该段落中简单地单击文本/段落并每次增加字体大小。
I was able to get a working form where I could put in a multiple choice box and have the users change size with that, but that simply isn't what I want to do.. 我能够得到一个工作表,可以在其中放置一个多选框,并让用户以此来更改大小,但这根本不是我想要的。
I was thinking it would look something like this: 我以为它看起来像这样:
<script type="text/javascript" language="javascript">
do
{
if (user-clicks) increase font size;
else keep current font size;
}
while (font-size < 4em)
</script>
Can anyone more experienced please help me getting this to work or at least put me on a path where I can more successfully figure it out myself? 任何经验丰富的人都可以帮助我解决这个问题,或者至少让我走上一条可以自己成功解决的道路吗? Thanks in advance for any help! 在此先感谢您的帮助!
<html>
<head>
<script language="javascript">
function resizeText(multiplier) {
multiplyText(multiplier, document.getElementById('myContent'));
}
function multiplyText(multiplier, txtobj) {
//keep current font size
if (txtobj.style.fontSize == '') {
txtobj.style.fontSize = "100%";
}
//keep current font size
if (multiplier == 0) {
txtobj.style.fontSize = "100%";
}
else { //get only the number part of the fontsize
txtobj.style.fontSize = parseFloat(txtobj.style.fontSize) + multiplier + "%";
}
}
</script>
</head>
<body>
<p id="myContent">
<a href="javascript:resizeText(10);"> Increase font</a></p>
</body>
</html>
Working Code with JQuery: 使用JQuery的工作代码:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
var gFont=1;
$('.fontAuto').click(function(e) {
if(gFont<4){
gFont=gFont+0.5;
$('.fontAuto').css('font-size',gFont+'em');
}else{
gFont =1;
$('.fontAuto').css('font-size','1em');
}
});
});
</script>
<style type='text/css'>
.fontAuto{
font-size:1em;
}
</style>
</head>
<body>
<p class="fontAuto">Text For testing</p>
</body>
</html>
Giving you a very short & simple answer- 给您一个非常简短的答案-
<p id=p1 style="font-size:25">
click <a href="javascript:document.getElementById('p1').style.fontSize=50">here</a> to enlarge.
</p>
In case you want to do it on click at any part of the <p>...</p>
tag use- 如果您想点击<p>...</p>
标记的任何部分来执行此操作,请使用-
<p id=p1 style="font-size:25" onclick="this.style.fontSize=50">
click to enlarge.
</p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.