Native JS control Font size

Source: Internet
Author: User

The previous article is about adding changes to property operations, and so today, by using a simple case to solidify the value of the property, a bit like controlling the text size of the news page.

First of all, look at the layout first, simply write a sentence, and write two buttons:

1 <inputID= "BTN1"type= "button"value="+"name=""/>2 <inputID= "BTN2"type= "button"value="-"name=""/>3 <PID= "P1"style= "FONT-SIZE:14PX;">This is some text which is some text which is some text which is some text</P>

As follows:

Then, by clicking the Add-minus button to control the size of the text, JS code as follows:

1<script>2Window.onload=function(){3         varOptxt=document.getelementbyid ("P1");4         varObtn1=document.getelementbyid ("Btn1");5         varObtn2=document.getelementbyid ("Btn2");6         varnum = 14;/*define an initial variable*/7Obtn1.onclick =function(){8num++;9optxt.style.fontsize=num+ ' px ';Ten         }; OneObtn2.onclick =function(){ Anum--; -optxt.style.fontsize=num+ ' px '; -         } the     } -</script>

Click on the "+" button, then the text will be added a pixel, always click on it will always become larger:

Click on the "-" button, then the text will be reduced by one pixel, the click will always be small:

It is so simple, be sure to pay attention to the definition of the initial variable, it must be a global variable, and you need to manipulate the button to make the text changes, then the increment and decrease of the variable must be a local variable.

Come here today and continue tomorrow! Come on!

Native JS control Font size

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.