简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> Web Front-end> JS Tutorial> body text

通过JavaScript控制字体大小的代码_javascript技巧

WBOY
Release： 2016-05-16 18:01:19
Original
1132 people have browsed it

为了此代码到您的网页必须使用像素大小的字体（PX），而不是相对大小的字体，使用“EM”或“％”。当然如果你使用其他字体单位的代码可以很容易地适应这些。如果脚本不能找到一个段落的字体大小，它会默认为12px。
核心代码:

复制代码代码如下:

var min=8;
var max=18;
function increaseFontSize() {
var p = document.getElementsByTagName('p');
for(i=0;i if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
} else {
var s = 12;
}
if(s!=max) {
s += 1;
}
p[i].style.fontSize = s+"px"
}
}
function decreaseFontSize() {
var p = document.getElementsByTagName('p');
for(i=0;i if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
} else {
var s = 12;
}
if(s!=min) {
s -= 1;
}
p[i].style.fontSize = s+"px"
}
}

包括上面的代码在您的网页（无论是放置在头部分，或将其放置在一个外部JS文件和进口）。然后可以调用的增加和减少象下面的字体大小的功能。
使用方法：
复制代码代码如下:

-
+
Related labels：
font size
source：php.cn
Previous article：JS 如果改变span标签的是否隐藏属性_javascript技巧 Next article：javascript之querySelector和querySelectorAll使用说明_javascript技巧
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Increase file upload size in Apache configuration Hello everyone! I'm struggling with this configuration issue because I'm trying to increas...
From 2023-11-11 11:00:33
0
1
287
Leverage VueJS components in PHP I want to mix basic HTML generated by Php and VueJS components without having to use VueJS...
From 2023-11-11 00:01:44
0
2
288
Symfony installation error "Archives may contain the same filename with different case" I'm trying to create a new Symfony project. When I start the installer: symfonynewsitepro ...
From 2023-11-09 16:47:54
0
1
267
How can I set the height of an outer div to always be equal to the height of a specific inner div? I have an outer div that contains three inner divs. I want the leftmost inner div to alway...
From 2023-11-07 13:59:30
0
2
314
CSS leading zeros for decimals not working with large numbers Recently I ran into a problem where I created an ordered list with over a hundred list ite...
From 2023-11-07 10:35:53
0
1
236
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！