One, local change style
It is divided into three kinds of changing direct style, changing classname and changing csstext. It is to be noted that:
Note Case:
JavaScript is very sensitive to the case, ClassName can not write "n" as "n", Csstext can not write "T" written "T", otherwise can not achieve the effect.
Call Method:
If you change ClassName, the class is declared in the style sheet beforehand, but not with style, like document.getElementById (' obj '). Style.classname= "..." is wrong! Can only be written as: document.getElementById (' obj '). Classname= "..."
Change Csstext
But if you use Csstext, you must add style, the correct way is: document.getElementById (' obj '). style.csstext= "..."
Change the direct style I do not have to say, we remember to write to the specific style can be, such as
document.getElementById (' obj '). style.backgroundcolor= "#003366 ″
Two, the global change style
In general, we can change the value of the chain-style of href to achieve real-time page style switching, that is, "change the template style." At this point we first need to give the target an ID that needs to be changed, such as
<link rel = "stylesheet" type= "Text/css" id= "CSS" href= "Firefox.css"/>
It is simple to call, as
<span on click= "javascript:document.getElementById (' CSS '). href = ' ie.css '" > Point I change Style </span>
For newcomers, it is often not known how CSS specific styles are written in JavaScript, and sometimes they are not required in different browsers. such as float in IE written stylefloat, in Firefox written in Cssfloat, which requires the accumulation of everyone. Searching for "Ccvita JavaScript" in Google may help with your doubts.
Basic Knowledge
There are usually three ways to call a style sheet in a Web page.
First: Link to external style sheet file (linking to a style Sheet)
You can create an external style sheet file (. css) First, and then use the HTML link object. Examples are as follows:
Copy Code code as follows:
<title> Document title </title>
<link rel=stylesheet href= "http://www.jb51.net/demo.css" type= "Text/css" >
</link>
In XML, you should add in the declaration area as shown in the following example:
<? Xml-stylesheet type= "Text/css" href= "Http://www.jb51.net/dhtmlet.css"?>
Second: Define inner style block objects (embedding a style blocks)
You can insert one between your HTML document and the tag
Block object. Define how to see style sheet syntax. Examples are as follows:
Copy Code code as follows:
<title> Document title </title>
<style type= "Text/css" >
<!--
Body {font:10pt "Arial"}
H1 {font:15pt/17pt "Arial"; Font-weight:bold Color:maroon}
H2 {font:13pt/15pt "Arial"; Font-weight:bold Color:blue}
p {font:10pt/12pt "Arial"; Color:black}
-->
</style>
<body>
</body>
Note that this setting of the Style object's Type property to "Text/css" allows browsers that do not support this type to ignore style sheets.
The third type: inline definition (Inline Styles)
Inline definition is the use of the object's style property to define the style sheet properties that apply to the object's markup. Examples are as follows:
<p style= "margin-left:0.5in; margin-right:0.5in "> This line has been added around the outer patch </p><p> </p>
