单击按钮可更改< body>的文本字体大小在javascript / css中 [英] click a button to change text font-size of <body> in javascript/css
本文介绍了单击按钮可更改< body>的文本字体大小在javascript / css中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这个例子是改变文本大小h1，h2，p。
This example is to change text size of h1, h2, p.
有没有办法javascript / css我可以更改body的文本大小，我可以更改整页文本吗？
Is there a way in javascript/css that I can change text size of "body" that I can change the whole page text?
$(document).ready(function() {
$("#small").click(function(event) {
event.preventDefault();
$("h1").animate({
"font-size": "24px"
});
$("h2").animate({
"font-size": "16px"
});
$("p").animate({
"font-size": "12px",
"line-height": "16px"
});
});
$("#medium").click(function(event) {
event.preventDefault();
$("h1").animate({
"font-size": "36px"
});
$("h2").animate({
"font-size": "24px"
});
$("p").animate({
"font-size": "16px",
"line-height": "20px"
});
});
$("#large").click(function(event) {
event.preventDefault();
$("h1").animate({
"font-size": "48px"
});
$("h2").animate({
"font-size": "30px"
});
$("p").animate({
"font-size": "20px",
"line-height": "20px"
});
});
$("a").click(function() {
$("a").removeClass("selected");
$(this).addClass("selected");
});
});
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
body {
background: #e7e7e7;
}
#wrapper {
width: 400px;
margin: 0 auto;
padding: 40px;
background: #fff;
box-shadow: 0 0 50px 0 rgba(0, 0, 0, .25);
}
#controls {
float: right;
padding: 2px;
width: 25px;
background: #333;
position: fixed;
margin: 0 0 0 440px;
text-align: center;
transition: .25s ease-out;
}
#controls a {
font-size: 24px;
color: #aaa;
display: block;
font-weight: bold;
padding: 5px;
}
#controls a:hover {
color: #fff;
background: #000;
transition: .25s ease-out;
}
a.selected {
background-color: #294C52;
color: #fff !important;
}
#small {
font-size: 10px !important;
}
#medium {
font-size: 16px !important;
}
#large {
font-size: 20px !important;
}
.small {
font-size: 75%;
}
h1 {
font-size: 36px;
font-weight: bold;
}
h2 {
font-size: 24px;
margin: 10px 0;
}
p {
font-size: 14px;
line-height: 20px;
}
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<body>
<div id="wrapper">
<div id="controls">
<a href="#" id="small">A</a>
<a href="#" id="medium" class="selected">A</a>
<a href="#" id="large">A</a>
</div>
<h1>Header</h1>
<h2>Subheader</h2>
<p>Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id. Ius ad ubique animal, eum recteque electram explicari no, sed in nostrum adipiscing. Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id.</p>
</div>
</body>
推荐答案
使用CSS和body上的其他类来改变基本字体大小可能会更方便吗？与这些类相关，您也可以在没有JavaScript / JQuery编码的情况下更改其他元素的大小。
Maybe it will be more convenient to use CSS and additional classes on body to change base font-size? Related these classes you also can change sizes of other elements without JavaScript/JQuery coding.
HTML
<button class="js-font" data-size="big">Bigger</button>
<button class="js-font" data-size="normal">Normal</button>
<button class="js-font" data-size="small">Smaller</button>
CSS
body, body.normal {
font-size: 16px;
}
body.big {
font-size: 36px;
}
body.small {
font-size: 12px;
}
JQuery
$(function() {
$('.js-font').on('click', function() {
$('body')
.attr('class', '')
.addClass($(this).data('size'));
});
});
查看小提琴 http://jsfiddle.net/shurshilin/94cnutdr/
跳，它会帮助你。
这篇关于单击按钮可更改< body>的文本字体大小在javascript / css中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
