Lo *_*ung 2 html javascript css jquery font-size
本例是改变h1、h2、p的文字大小。
javascript/css 中有没有一种方法可以更改“正文”的文本大小，以便更改整个页面文本？
$(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>实际上，您可以通过比您想象的简单得多的方式来完成此任务。
通过在正文上设置起始字体大小，您可以将其他元素的字体大小设置为使用相对em单位（在本例中，1em = 1xbody 字体大小，因此如果正文字体大小为 14px，则 1em = 14px）。然后，您可以使用 Javascript 来增大/减小正文字体大小，从而影响这些元素的相对字体大小。
动画可以单独使用 CSS 过渡来处理。
$(document).ready(function() {
$('#increase, #decrease').on('click', function() { // click to increase or decrease
var btn = $(this),
fontSize = parseInt(window.getComputedStyle(document.body, null).fontSize, 0); // parse the body font size as a number
if (btn[0].id === "increase") { // detect the button being clicked
fontSize++; // increase the base font size
} else {
fontSize--; // or decrease
}
document.body.style.fontSize = fontSize + 'px'; // set the body font size to the new value
});
});body {
font-size: 14px;
}
h1,
h2 {
transition: font-size 200ms; /* animate font size changes */
}
h1 {
font-size: 2em; /* h1 element is 2x body font size */
}
h2 {
font-size: 1.5em; /* h1 element is 1.5x body font size */
}<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<button id="increase">increase +</button>
<button id="decrease">decrease -</button>
<h1>Header 1</h1>
<h2>Header 2</h2>