Javascript 使用Jquery调整文本大小
我想让用户选择他们想要的字体大小,它只增加文本的字体大小。现在我尝试了一些不同的方法,但似乎没有任何效果。我只是想让它可以点击向上或向下箭头,它使它更大的1倍,每次他们点击。但是,只有10-80的范围,否则将给出错误 我将在下面发布html和js的代码。我会继续努力的,因为我已经有了颜色、字体系列和粗体/斜体按钮 多谢各位 HTML/JSJavascript 使用Jquery调整文本大小,javascript,jquery,Javascript,Jquery,我想让用户选择他们想要的字体大小,它只增加文本的字体大小。现在我尝试了一些不同的方法,但似乎没有任何效果。我只是想让它可以点击向上或向下箭头,它使它更大的1倍,每次他们点击。但是,只有10-80的范围,否则将给出错误 我将在下面发布html和js的代码。我会继续努力的,因为我已经有了颜色、字体系列和粗体/斜体按钮 多谢各位 HTML/JS **<select id="font"> <h2>Font Size</h2> <input typ
**<select id="font">
<h2>Font Size</h2>
<input type="text" name="font" value="15" id="font" /> px
<br /><span id="sizeWarning"></span>
</select>**
$(document).ready(function() {
$('#buttonup').click(function(){
curSize= parseInt($('#text').css('font-size')) + 2; if(curSize<=20)
$('#text').css('font-size', curSize);
});
$('#buttondown').click(function(){
curSize= parseInt($('#text').css('font-size')) - 2;
if(curSize>=12)
$('#text').css('font-size', curSize);
});
});
更新了一个简单的示例,添加了一些检查,确保字体大小仅为10-80: 演示: JS: HTML:
请一次问一个问题。主题外:只需要document.ready的一个实例。所有的功能都在里面,很抱歉。是的,我知道,通常在我准备好之后清理代码。这并不表示对愿意帮助的志愿者的尊重。啊,真的,很抱歉,我会清理它。很抱歉,删除所有与此特定问题无关的代码怎么样。我看不出你在哪里试图改变字体大小。非常感谢你,真的帮了大忙。出于某种原因,它不起作用了,我会继续看,它在jfiddle中工作得很棒,因为我试图更改的文本是文本,所以我留下了它。我想这是因为我的输入被一个标签包围了。我可以修改jquery以某种方式合并它吗,因为我不应该删除选择器标记。如果你在代码顶部查看我的操作,它就在那里。我会继续胡闹around@user3321452嗯,你提供的HTML代码看起来很混乱。您只能在标记内有标记。您的代码不是有效的HTML。请看:我修复了您的HTML并创建了JavaScript,它可以生成10到80之间的标记。我还更新了jQuery代码,以监听字体元素。非常感谢,现在可以使用有效的代码了!
$("#up").click(function () {
var currentSize = $("#text").css("font-size");
currentSize = currentSize.replace(/[^\d.]/g, "");
currentSize++;
if(currentSize < 10 || currentSize > 80){
alert("Font-size between 10 and 80 only!");
}
else {
$("#text").css("font-size", "" + currentSize + "px");
}
});
$("#down").click(function () {
var currentSize = $("#text").css("font-size");
currentSize = currentSize.replace(/[^\d.]/g, "");
currentSize--;
if(currentSize < 10 || currentSize > 80){
alert("Font-size between 10 and 80 only!");
}
else {
$("#text").css("font-size", "" + currentSize + "px");
}
});
$("input#inputSize").on("keyup change", function () {
var newSize = $(this).val();
if(newSize < 10 || newSize > 80){
alert("Font-size between 10 and 80 only!");
}
else {
$("#text").css("font-size", "" + newSize + "px");
}
});
<p id="text">Text, yay!</p>
<span id="up">Up</span><br />
<span id="down">Down</span><br />
change size via input: <input id="inputSize" type="number" step="1" value="20" max="80" min="10" />