Home > Developer > JavaScript
The text gets bigger and smaller, and the detail page is more common.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Zooming in and out of text and using classname</title> <style>#p1{width:960px;}. Red,. Green{width:400px;Border:5px Solid #333;background:#eee;padding:20px;}. Red{Color:Red; }. Green{Color:Green; } </style></Head><Script> /*JS does not allow "-" Padding-top paddingtop margin-left marginleft*/window.onload= function(){ //get Element varOBTN1=document.getElementById ('BTN1'); varoBtn2=document.getElementById ('btn2'); varOBtn3=document.getElementById ('Btn3'); varOBtn4=document.getElementById ('Btn4'); varOP=document.getElementById ('P1'); //defines an initial value for the text size, stored in the variable num varNum= -; //text gets smallerObtn1.onclick= function(){
if (num >= 12) {
Num--;
oP.style.fontSize = num + ' px ';
}
}; // Text Amplification = function() { if (num <= 20) {
num + +;
oP.style.fontSize = num + ' px ';
}
}; //text turns redObtn3.onclick= function() {op.classname= 'Red'; }; //text turns greenObtn4.onclick= function() {op.classname= 'Green'; }; };</Script><Body> <inputtype= "button"value="-"ID= "BTN1"> <inputtype= "button"value="+"ID= "BTN2"> <inputtype= "button"value= "Turn red"ID= "Btn3"> <inputtype= "button"value= "Turn green"ID= "Btn4"> <PID= "P1"style= "FONT-SIZE:14PX;">These 10 things help those successful people become the most profitable 20% in society. 1. They look back on their day 2. They will write down their thoughts 3. They read in depth 4. They set a priority of 5 for the next morning. They spend time with their families. 6. They avoid digital addiction 7. They spend time close to nature 8. They meditate 9. They imagine the future. If you can study the ten good habits of successful people, your productivity will improve overnight and your life will be better. So, what good habits do you want to practice before you go to bed?</P></Body></HTML>
Attention:
1)JS does not allow "-" when setting the style. (such as: Font-size will have to write fontsize, similar to the Hump name method)
2) Add class to the element using the className instead of class, this note, because class is the reserved word js, is not allowed to use, otherwise it will error!
JS Floating compatibility usage
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Usage of JS Floating</title></Head><Body> <Script> /*oDiv.style.float = ' right '; Float is a javascript reserved word is not available oDiv.style.styleFloat = ' right '; IE oDiv.style.cssFloat = ' left '; Non ie IE (stylefloat) non ie (cssfloat) <div class= "right" ></div>*/window.onload= function(){ //get Element varOdiv=document.getElementById ('Div1'); ODiv.style.styleFloat= ' Right'; //compatible with ie6~8oDiv.style.cssFloat= ' Right'; //compatible with standard browsers and above IE9}; </Script><DivID= "Div1"style= "width:100px; height:100px; border:1px solid #ccc;"></Div></Body></HTML>
Attention:
oDiv.style.float = ' right '; It's wrong to write this, because float is a JavaScript reserved word is not available
The wording of compatibility is:
ODiv.style.styleFloat = ' right '; Ie
ODiv.style.cssFloat = ' right '; Non-IE
So to remember:
IE (stylefloat)
Non IE (cssfloat)
JavaScript Basics-The use of classname and JS floating compatible usage
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
