Recently found a lot of friends ask questions: How to use JS to change the size of an article font?
Small series to check the relevant articles, for everyone to organize a few small cases for your reference, the specific content as follows
Effect Chart:
Click on the big, small button, at any time to switch font size
Specific code:
To share a chestnut:
The principle of this work is very simple, that is, when the event is triggered to change the size of the article, more straightforward is to change the value of this property font-size (jquery version 1.7.2)
HTML
<div class= "box" >
<div class= "Ctrl" >
<a href= "javascript:;" > Zoom </a>
<a href= "javascript:;" > Zoom </a>
<a href= "javascript:;" > Default </a>
</div>
<div class= "cont" > This is some text </div>
</div>
Css
. box{text-align:center;
ctrl{padding:50px 0px 0px 0px;background: #f4f4f4; font-size:0px;border-bottom:3px solid #333;
CTRL a{display:inline-block;width:50px;height:30px;line-height:30px;background: #333; color: #fff; font-size:14px;}
. CTRL a:hover{background: #444; color: #fff; font-weight:700;text-decoration:none;}
. cont{padding-top:50px;font-size:14px;}
Js
$ (function () {
function Sizein () {
var sizecont = parseint ($ (". Cont"). CSS ("fontsize"));//Get the value of the original set Font-size
if (Sizecont = = 30) {////Font-size to 30 pixels to stop
$ (". Cont"). css ({fontsize:sizecont});
else{
$ (". Cont"). CSS ({fontsize:sizecont + 1});
}
function Sizeout () {
var sizecont = parseint ($ (". Cont"). CSS ("FontSize");
if (Sizecont = = 10) {////Font-size to 10 pixels to stop
$ (". Cont"). css ({fontsize:sizecont});
else{
$ (". Cont"). css ({fontsize:sizecont-1});
}
function Sizedefault () {
$ (". Cont"). CSS ({fontsize: ""})
}
$ (". Ctrl a"). Click (function () {
if ($) ( This). Index () = = 0) {
sizein ();
} else if ($ (this). Index () = 1) {
sizeout ();
} else{
Sizedefault ();}}
);
I hope this article will help you learn about JavaScript programming.