html调整按钮字号,javascript - 字体的调整大小-如何制作按钮来更改html中所有标签的字体大小 - 堆栈内存溢出...

$(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": "14px", "line-height": "20px" }); }); $("#large").click(function(event) { event.preventDefault(); $("h1").animate({ "font-size": "48px" }); $("h2").animate({ "font-size": "30px" }); $("p").animate({ "font-size": "16px", "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: #000; color: #fff !important; } #small { font-size: 10px !important; } #medium { font-size: 14px !important; } #large { font-size: 18px !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; }

A A A

Header

Subheader

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.