单击一个按钮更改文本的字体大小 <body> 在javascript / css中
[英]click a button to change text font-size of <body> in javascript/css
问题描述
为了清楚地了解我在做什么，请检查此示例或检查以下代码
本示例将更改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>
4 个解决方案
解决方案1
4 2015-05-11 13:19:22
实际上，您可以以比您想象的简单得多的方式完成此操作。
通过在主体上设置起始字体大小，可以将其他元素的字体大小设置为使用相对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>
解决方案2
3 2015-05-11 13:18:04
如果在正文以外的所有地方都使用带有单位'em'的字体大小，则可以更改正文字体大小，其他所有字体大小也会改变。
$(document).ready(function() { $('.change-fs').click(function() { $('.body').css('font-size', $(this).attr('data-size')); }); });
.body { font: 400 10pt sans-serif; } h1 { font-size: 2em; } h2 { font-size:1.5em; } p { font-size: 1em; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="body"> <h1>A header, really big</h1> <h2>A secondary header, still quite big</h2> <p>Normal text, default font-size</p> <div class="fs-ctrl"> <div data-size="10pt" class="change-fs">10pt</div> <div data-size="12pt" class="change-fs">12pt</div> <div data-size="16pt" class="change-fs">16pt</div> <div data-size="20pt" class="change-fs">20pt</div> </div> </section>
解决方案3
2 已采纳 2015-05-11 13:23:14
也许在主体上使用CSS和其他类来更改基本字体大小会更方便？ 与这些类相关，您还可以更改其他元素的大小，而无需使用JavaScript / JQuery编码。
的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/
合，它将为您提供帮助。
解决方案4
0 2016-05-11 16:15:38
我写了一个jQuery插件来在更复杂的现有网站设计上完成此任务。 https://github.com/msigley/jQuery-Chaos-Fontsize-Selector
如何在 CSS3 或 javascript 中与窗口的更改大小成比例地更改字体大小
[英]how to change the font-size proportionally to the change size of the window in CSS3 or javascript
无论如何要更改具有特定字体大小的所有文本的字体大小？
[英]Is there anyway to change font-size of all text with a specific font-size?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.