Dynamic control style Sheet
In JavaScript, there are two ways to dynamically change style properties, one is to use the Style property, and the other is to use the ClassName property of the style. Additionally control elements are hidden and displayed using the Display property.
1. Using the Sytle property
Grammar:
element. style. Styles property = "value";
The use of CSS styles in JavaScript is rarely different from using CSS in HTML, because JavaScript-represents a minus sign, so if the style attribute name with "-" is omitted, the following first letter is capitalized.
Reference style Properties
For example:
document.getElementById ("title"). Style.fontsize= "14px"; // change the title label font to 14th # document.getElementById (' id1 '). style.color= ' Red '; // set ID1 font to Red
This way you can only get inline style properties if you want to get external styles and inner style properties. If the IE browser needs to use the Currentstyle object, if Firefox is using the getComputedStyle method.
<StyleType= "Text/css">#adv{Position:Absolute;Top:20px;Left:30px;Width:100px;Height:100px;Background-color:Red;}</Style><ScriptType= "Text/javascript">functionTest () {VarAdv=document.getElementById ("Adv");//Alert (Adv.style.left + "" + adv.style.top); Style is not valid if it is not inline//If it is IE browserIf(Adv.currentstyle) {Alert ("IE Browser:"+Adv.currentStyle.left+""+Adv.currentStyle.top); }Else{VarLeft=Document.defaultView.getComputedStyle (ADV,Null). Left;VarTop=Document.defaultView.getComputedStyle (ADV,Null). Top; Alert"Non-IE browser:"+Left+""+ top);} }</script>< Span style= "color: #0000ff;" ><input type= " Button " Value=" Move div " Onclick= "Test ()" /> <div id= "adv" Style=" "> </div>
2. Using the ClassName Property
Grammar:
element. Classname= "class style";
This approach requires a predefined class style and then assigns a value to the ClassName property. Reusability is better.
document.getElementById (' Id1 '). Classname= ' Red '; // Add Class style for ID1
3. Display Properties
Grammar:
element. display = "Value"
The value here is the property value of display in CSS, none hidden, block block display, inline line display.
<ScriptLanguage= "JavaScript">functionShow (str) {VarI=documeng.getelementbyid (str); if (I.style.display == "none" = else{I.style.display = none "; }} </script>
4. Scroll bar
Property:
ScrollLeft: The distance of horizontal scrolling;
ScrollTop: distance of vertical scrolling;
Event:
Onscroll: Scrolling Events
Note: Under Chrome, DOCUMENT.BODY.SCROLLTOP can read the normal values, but in IE6 and Firefox, the value of Document.body.scrollTop is always 0, so the search method on the Internet. It turns out to be a DTD problem, and if the page starts with
Therefore, the more compatible wording is: var oscrolltop = Document.documentElement.scrollTop | | document.body.scrollTop;To achieve page scrolling ads Image:
<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD"><Html><Head><MetaHttp-equiv= "Content-type"Content= "text/html; charset=gb2312 "/><Title> Advertising pictures with the mouse scrolling</Title><StyleType= "Text/css">#main{Text-align:Center;}#adver{Position:Absolute;Left:50px;Top:30px;Z-index:2;}</Style><ScriptType= "Text/javascript">VarAdvertop;//Distance from top of pageVarAdverleft;VarAdverobject;//Layer ObjectfunctionInix () {Adverobject=document.getElementById ("Adver");//Get Layer ObjectsIf(Adverobject.currentstyle) {Advertop=parseint (AdverObject.currentStyle.top); Adverleft=parseint (AdverObject.currentStyle.left); }Else{Advertop=parseint (Document.defaultView.getComputedStyle (Adverobject,Null). top); Adverleft=parseint (Document.defaultView.getComputedStyle (Adverobject,Null). left); }}functionMove () {AdverObject.style.top=Advertop+parseint (Document.documentElement.scrollTop||DOCUMENT.BODY.SCROLLTOP)+"Px"; AdverObject.style.left=Adverleft+parseint (Document.documentElement.scrollLeft||Document.body.scrollLeft)+"Px";} Window.onload=Inix;window.onscroll=Move</Script></Head><Body><DivId= "Adver"><ImgSrc= "Images/adv.jpg"/></Div><DivId= "main" ><img Span style= "color: #ff0000;" >src= "images/main1.jpg" /><img src= "images/main2.jpg" /><img src= "images/main3.jpg" /></div></body>< Span style= "color: #0000ff;" ></html>
Java Script Basics (10) Accessing style sheets
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
