单击一个按钮以在javascript / css中更改的文本字体大小
要清楚了解我正在做什么，请查看此示例或检查以下代码
此示例是更改h1，h2，p的文本大小。
有没有办法在javascript / css中我可以更改“body”的文本大小，我可以更改整页文本？
$(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; }
也许在主体上使用CSS和其他类来更改基本字体大小会更方便吗？ 与这些类相关，您也可以在不使用JavaScript / JQuery编码的情况下更改其他元素的大小。
HTML
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/
跳，它会帮助你。
实际上，您可以以比您想象的更简单的方式实现这一目标。
通过在正文上设置起始字体大小，您可以将其他元素的字体大小设置为使用相对的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 */ }
Header 1
Header 2
如果除了正文之外在任何地方使用单位’em’的字体大小，您可以更改正文字体大小，其他所有字体也会更改。
的jsfiddle
$(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; }
A header, really big
A secondary header, still quite big
Normal text, default font-size
10pt 12pt 16pt 20pt
我写了一个jQuery插件来完成更复杂的现有网站设计。 https://github.com/msigley/jQuery-Chaos-Fontsize-Selector