Home Web Front-end JS Tutorial How to adjust font size and line height in jquery?

How to adjust font size and line height in jquery?

Jun 17, 2017 am 09:23 AM
jquery how

font-sizeThe attribute must be familiar to everyone. This attribute controls the size of the font. The following will introduce how to use jquery to obtain the font-size attribute value. Interested friends can refer to the following .

To increase, reduce, and restore the original size of the font on the page, you need to define three elements in the html page. The classes of the elements are resetFont, increaseFont, and decreaseFont. In the JQueryevent# of this file ## defines the click events of three elements to increase, reduce, and restore the original size.

The sample code is as follows:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

$(function () {

//取得字体大小,在html标记下定义了font-size

var originalFontSize = $("html").css("font-size");

//恢复默认字体大小

$(".resetFont").click(function () {

$("html").css("font-size", originalFontSize);

//JavaScript不向下执行

return false;

});

//加大字体,某个元素的class定义为increaseFont

$(".increaseFont").click(function () {

//取得当前字体大小 后缀px,pt,pc

var currentFontSize = $("html").css("font-size");

//取得当前字体大小,parseFloat()转为float类型去除后缀

var currentFontSizeNumber = parseFloat(currentFontSize);

//新定义的字体大小

var newFontSize = currentFontSizeNumber * 1.1;

//重写样式表

$("html").css("font-size", newFontSize);

//JavaScript不向下执行

return false;

});

//减小字体,某个元素的class定义为decreaseFont

$(".decreaseFont").click(function () {

//取得当前字体大小 后缀px,pt,pc

var currentFontSize = $("html").css("font-size");

//取得当前字体大小,parseFloat()转为float类型去除后缀

var currentFontSizeNumber = parseFloat(currentFontSize);

//重新定义字体大小

var newFontSize = currentFontSizeNumber * 0.9;

//重写样式表

$("html").css("font-size", newFontSize);

//JavaScript不向下执行

return false;

});

});

Copy after login

Jquery implementation of setting font size (font-size) and line height (

line-height)  

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

var cssfontSize=$(".txt_container").css('font-size'); // 获取字体大小

var csslineHeight=$(".txt_container").css('line-height');//获取行高 ,如果没有设置会得到normal..

var unit=cssfontSize.slice(-2);     //这里获取的是带上单位的字体大小 比如"16px" 所以要使用slice(-2)从倒数2位开始,从而得到16.

var fontSize=parseFloat(cssfontSize);  //得到字符串内数值部分

var lineHeight=parseFloat(csslineHeight); //同上

if(c=="fontA_plus"){                  

    if(fontSize>32)

         return false;

         fontSize=fontSize+2;

         lineHeight=lineHeight+2;

}

    if(c=="fontA_minus")

    {

        if(fontSize<18) return false;

        fontSize=fontSize-2;

        lineHeight=lineHeight-2;

    }

$(".txt_container").css('font-size',fontSize+unit);  //JQ css方法存在第二个参数则为设置

$(".txt_container").css('line-height',lineHeight+unit);

Copy after login

                                                                                                             

The above is the detailed content of How to adjust font size and line height in jquery?. For more information, please follow other related articles on the PHP Chinese website!

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

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Detailed explanation of jQuery reference methods: Quick start guide Detailed explanation of jQuery reference methods: Quick start guide Feb 27, 2024 pm 06:45 PM

Detailed explanation of jQuery reference methods: Quick start guide

How to use PUT request method in jQuery? How to use PUT request method in jQuery? Feb 28, 2024 pm 03:12 PM

How to use PUT request method in jQuery?

How to remove the height attribute of an element with jQuery? How to remove the height attribute of an element with jQuery? Feb 28, 2024 am 08:39 AM

How to remove the height attribute of an element with jQuery?

jQuery Tips: Quickly modify the text of all a tags on the page jQuery Tips: Quickly modify the text of all a tags on the page Feb 28, 2024 pm 09:06 PM

jQuery Tips: Quickly modify the text of all a tags on the page

In-depth analysis: jQuery's advantages and disadvantages In-depth analysis: jQuery's advantages and disadvantages Feb 27, 2024 pm 05:18 PM

In-depth analysis: jQuery's advantages and disadvantages

Use jQuery to modify the text content of all a tags Use jQuery to modify the text content of all a tags Feb 28, 2024 pm 05:42 PM

Use jQuery to modify the text content of all a tags

Understand the role and application scenarios of eq in jQuery Understand the role and application scenarios of eq in jQuery Feb 28, 2024 pm 01:15 PM

Understand the role and application scenarios of eq in jQuery

How to tell if a jQuery element has a specific attribute? How to tell if a jQuery element has a specific attribute? Feb 29, 2024 am 09:03 AM

How to tell if a jQuery element has a specific attribute?

See all articles