Home > Developer > Web Develop
As you can see, there are usually three ways to set the style for HTML: inline style, internal style sheet, and external style sheet .
1. Inline style:An inline style sheet is the addition of the style property directly within the lines of an HTML element.
2, Internal, external style sheet:<id= "div1" style= "width:100px; height:100px; background:black"></Div >
An internal style sheet is an external style sheet file (*.css) that has a <style> tag in the an external style sheet <link> a label reference.
1<Head>2<Style>3#div1{Width:200px;Height:200px Background:black< Span style= "color: #000000;" >//This is an internal style sheet 4 </>5 <link rel= "stylesheet" Type=" Text/css " href< Span style= "color: #0000ff;" >= "Example.css" >//Here is an external style sheet that references the external example.css file 6 </HEAD>
In general, the internal style sheet is less used, and in order to make the HTML document look more concise, the general script and style sheet are externally referenced.
precedence of CSS style sheet definitionsI'm done with the definition of the stylesheet, let's take a look at the precedence of CSS style sheet definitions . ( Let's just say briefly, the precedence of these three CSS styles, the precedence of CSS selectors, will be opened separately)
There is one sentence to say: Tun . It would be clear to think about that.
Browser Default Properties < external style Sheets < internal style Sheets < inline styles
When a style definition has duplicates, it takes precedence over the inner-most style definition. So when we do the style modification, we modify the inline style or modify the style with the class selector .
View CSS properties, generally the most commonly used, the best way to understand is to use object.style.***
1 <script>function() {var odiv = document.getElementById (' div1 '); "100px" Here is a string that shows the inline style }6 </script> The above one is just to view the inline style single attribute, if you need to see all the properties, you can use obj.csstext or obj.getattribute ("style"), will be described in detail later.
Remember! They are not able to get property values in the style sheet.
Object.style It shows only the properties of the inline style, even if the style sheet is defined, with Style.width can not get its value (for width, this time we'd better use obj.offsetwidth, But get the value without unit, pay attention to it)
2. View style sheet (getcomputedstyle,currentstyle)Viewing a property of a style sheet is not as simple as it is.
A method getComputedStyle (object,null) [name] is used here, and the second parameter is a pseudo-element (: After), which is set to NULL if it is not required.
This method is very powerful, as the name implies, to get the calculated style, that is to say. The properties you want to get are finally finalized with style attributes, including style sheets and inline styles.
The inline style width is removed after var divwidth = getComputedStyle (odiv,null) [' width '// ' 200px ', which is defined in the style sheet. Not compatible in IE.
As you can see, I wrote an IE incompatibility on the notes. Such a good attribute, unexpectedly incompatible, hateful!
But fortunately, IE also has its own method of definition Obj.currentstyle[name] . I won't write the code.
let's write a method that is compatible with common use.
1 function getstyle (obj,name) {2 if (Obj.currentstyle) {// 3 return< Span style= "color: #000000;" > Obj.currentstyle[name]; 4} else{5 return getComputedStyle (obj, null) [Name];6 }7} So we can "get " the CSS properties we want! Well, make a blue hole for the mark.
(with this method, the name parameter must be complete and hump-shaped, that is, Background-color to write backgroundcolor, abbreviations, of course, No.) There are border, some browsers also want points, left box width, right box width, here so many big pits, I do not elaborate. ）
So everybody use this getStyle (obj,name), must pay more attention! I hope that you can get more hands-on experience experience.
Modifying CSS PropertiesFinally to the last link.
There are several ways to modify CSS properties, one by one.
1, obj.style.xxx = valThis is the most widely used, but also used to be more handy!
Its principle is to override the style in the style sheet by adding inline styles.
2, Obj.style.cssText = "xxx", Obj.setattribute ("style", "xxx")Why do these two put together to say? Because there are a lot of similarities between the two, but the actual operation I would recommend the use of the former.
Odiv.setattribute (' style ', ' width:300px '); // They modify the inline style. ODiv.style.cssText = "width:300px"; Watch out! both of these methods overwrite inline styles, meaning that the original inline style is completely erased. and SetAttribute, incompatible IE6 this antique.
So to modify the properties of inline styles, you can use obj.style.cssText
3, obj.classname = "xxx"This is what we used to say. Add Class. This is universal, there's nothing to say.
If you want to use SetAttribute to set class, it is necessary to pay attention to, in IE is setAttribute ("ClassName", "xxx")
The other browsers are consistent with the SetAttribute ("Class", "xxx") corresponding to the class attribute of the inline style. (This method is not recommended)
CSS to remove the style.For inline styles, we can use the following methods.
is equal to removing all inline styles, you can replace 2 odiv.removeattribute ("style") if you do not need to remove all of themBy emptying the inline style, the overridden style sheet properties can reproduce the daylight.
Of course, you can remove the class selector in the style sheet in addition to inline styles.
1 odiv.classname = ""; 2 Odiv.removeattribute ("class"); // non-IE73 Odiv.removeattribute ("ClassName"); //ie7 Finally, I am sorry to say, I do not know how to use JS to modify the style sheet styles, if you have to know the students can leave your comments.
Modify CSS styles with JS view (Csstext,attribute (' style '), Currentstyle,getcomputedstyle)
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
