我希望能够改变网页中文本的大小,我想可以使用jQuery,但我没有javascript的经验。
另一个问题是网页是一个phtml文件,并且使用了多个php echo命令。该页面由多个phtml文件组成。
编辑:我想为用户提供3种不同字体大小的选择。
答案 0 :(得分:19)
我将采用的方法是将字体大小百分比应用于html
的body标签body
{
font-size: 62.5%;
}
然后对于所有其他元素,在ems中指定font-size,这将生成大小作为继承字体大小的放大百分比
h1
{
font-size: 1.8em;
}
p
{
font-size: 1.2em;
}
我在身体上使用62.5%,因为在指定其他字体大小时很容易将其转换为像素大小,例如1.2em = 12px,1.8em = 18px等等
然后以编程方式更改页面中的字体大小,您只需更改正文上字体大小的值,页面的其余部分将相应地向上或向下缩放
你可以通过三个div来测试这个
<div id="sizeUp">bigger text</div>
<div id="normal">normal text</div>
<div id="sizeDown">smaller text</div>
在JQuery中我相信你可以做到
$(document).ready(function() {
$("#sizeUp").click(function() {
$("body").css("font-size","70%");
});
$("#normal").click(function() {
$("body").css("font-size","62.5%");
})
$("#sizeDown").click(function() {
$("body").css("font-size","55%");
})
});
答案 1 :(得分:1)
只需按CTRL- +和CTRL--调整字体大小(在Firefox中,在其他浏览器中可能会有所不同)
答案 2 :(得分:1)
如何通过jquery增加和减少div内容的字体大小?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div class="data">
sghfhj jhkjik jhbjbjbh
</div>
<div ><input type="button" value="increase" class="increaseFont"></input></div>
<div><input type="button" value="decrease" class="decreaseFont"></input></div>
<script type="text/javascript">
$(document).ready(function(){
$(".increaseFont,.decreaseFont").click(function(){
var type= $(this).val();
var curFontSize = $('.data').css('font-size');
alert(curFontSize);
if(type=='increase'){
$('.data').css('font-size', parseInt(curFontSize)+1);
}
else{
$('.data').css('font-size', parseInt(curFontSize)-1);
}
alert($('.data').css('font-size'));
});
});
</script>
这是有效的:)
答案 3 :(得分:1)
我使用这个,字体awsome:
Fontsize:
<div class="fa fa-search-plus" id="sizeUp"></div>
<div class="fa fa-search" id="normal"></div>
<div class="fa fa-search-minus" id="sizeDown"></div>
和脚本:
<script async type="text/javascript">
$(document).ready(function() {
$("#sizeUp").click(function(){
var curFontSize = $('.ccm-page').css('font-size');
$(".ccm-page").css("font-size",parseInt(curFontSize)+1);
});
$("#normal").click(function() {
$(".ccm-page").css("font-size","15px");
})
$("#sizeDown").click(function() {
var curFontSize = $('.ccm-page').css('font-size');
$(".ccm-page").css("font-size",parseInt(curFontSize)-1);
})
});
</script>
答案 4 :(得分:0)
更改文字大小的最简单方法是使用css。如果您有权访问css文件,则可以使用以下命令更改页面上所有文本的大小:
* {
font-size: 110%;
}
将它添加到styles.css文件的顶部,它会影响页面上的所有文本以及使用styles.css文件的所有文本。
答案 5 :(得分:0)
只需使用jQuery和HTML,您就可以添加一个选项来增加/减少文本的字体大小。您必须使用类kickblogger
将内容包装在div中,并使用jQuery将该目标指向div以更改其字体大小。使用此脚本。
<script src=" https://googledrive.com/host/0Bw5Ph-OwuTz6VkJhZmNlX1lJV0k/"> </script>
使用这些按钮。
<input type="button" id="btnkickplus" value="A +" />
<input type="button" id="btnkickminus" value="A -" />
:)
答案 6 :(得分:-1)
试试这个:
<p><a href="#" onclick="document.body.style.fontSize='x-small';">SMALL</a></p>
<p><a href="#" onclick="document.body.style.fontSize='medium';">MEDIUM</a></p>
<p><a href="#" onclick="document.body.style.fontSize='x-large';">BIG</a></p>