Javascript 使用css/js缩放所有字体
我需要一次点击改变所有字体的大小(所以它是为有视力问题的人调整的)。单击下一步后,它应恢复正常。最简单的方法是什么?我不想访问每一个文本,因为它们有很多。我想按大约20-50%的比例进行缩放。有没有一个简单的方法?我使用bootstrap和jQuery。选择所有元素,并按您想要的大小缩放它们的字体大小Javascript 使用css/js缩放所有字体,javascript,css,twitter-bootstrap,fonts,scaling,Javascript,Css,Twitter Bootstrap,Fonts,Scaling,我需要一次点击改变所有字体的大小(所以它是为有视力问题的人调整的)。单击下一步后,它应恢复正常。最简单的方法是什么?我不想访问每一个文本,因为它们有很多。我想按大约20-50%的比例进行缩放。有没有一个简单的方法?我使用bootstrap和jQuery。选择所有元素,并按您想要的大小缩放它们的字体大小 $("*").each(function(index) { var size = $( this ).css("font-size"); $( this ).css("font-size"
$("*").each(function(index) {
var size = $( this ).css("font-size");
$( this ).css("font-size", parseInt(size)*YOUR_FACTOR);
});
您还可以通过保留一个用于切换的变量来反转此操作。要选择所有元素,请使用
$(“*”)
,要设置字体大小,请使用.css(“字体大小”,“25px”)
var标志=true;
函数changeSize(){
国际单项体育联合会(旗)
{
$(“*”).css(“字体大小”,“50px”);
flag=false;
}
否则{
$(“*”).css(“字体大小”,“15px”);
flag=true;
}
}
*{
字体大小:15px;
}
DIV
跨度
p
更改大小
以下是一种方法。您必须在p ul
等元素上迭代您的containter
,以增加字体
$(.action btn”)。在(“单击”,函数()上{
var action=$(this.attr('data-value');
var元素=$(“#部分”)。查找(“p、ul、ol”);
var FontSizeToIncreasedoReduced=2;
fontChange(元素、FontSizeToIncreasedoReduced、操作)
});
函数fontChange(元素、FontSizeToIncreaseDoreduced、操作){
$(元素)。每个(函数(){
var c=$(本);
如果(操作=='in'){
c、 css(“字体大小”)、parseInt(c.css(“字体大小”)+FontSizeToIncreased或Decreated)
}否则{
c、 css(“字体大小”),parseInt(c.css(“字体大小”)-fontsizeto递增或递减)
}
})
}
Lorem ipsum文本
- 你好1
最好在javascript中单击切换css类
比如说
Html
Js
使用“缩放”属性尝试此操作:
html,
身体{
缩放:1;
字号:1rem;
}
+大小(使用缩放)
-大小(使用缩放)
DIV
跨度
p
函数changeSize(参数){
var zoom=0.1
如果(参数=“向上”){
$(“body”).css(“zoom”、“+=”+zoom);
}否则{
$(“body”).css(“缩放”,“-=”+zoom);
}
}
到目前为止您尝试了什么?使用相对的字体大小单位,例如rem或em。在整个CSS中使用相同的单位。当您需要缩放大小时,只需增加正文的字体大小。其他元素的字体大小也会因相对单位而增加。或者使用Javascript增加正文的缩放级别如何?我喜欢它的简单性,但我必须增加字体大小。24px*3是NaN。但通过解析,它是有效的。有时候它会崩溃,比如2.83333333,我必须弄明白我不能得到你。您想将所有字体大小更改为唯一大小还是更改为当前大小的某个因子?如果要更改为因子,我只需修改它即可。您可以使用parseInt()
方法避免长数字和浮点数。我已使用parseInt()
编辑了代码。谢谢你@KhyatiAgolaChandak
<div class="original-font">
<!-- any element-->
</div>
.original-font.large-font {
font-size: calc('your original font' + '% how much you want to increase or decrease');
}
$(".original-font").click(function() {
$(".original-font").toggleClass('larger-font');
});