Copy Code code as follows:
<script type= "Text/javascript" >
<! [cdata[
function $ (obj)
{
return document.getElementById (obj);
}
function GetStyle (obj,stylename)
{
if (Obj.currentstyle)//for ies
{
return Obj.currentstyle[stylename]; Note how to get
}
else//for Others
{
Return Document.defaultView.getComputedStyle (obj,null). GetPropertyValue (StyleName);
Return Document.defaultView.getComputedStyle (Obj,null) [stylename];
}
}
$ (' Btngetclick '). Onclick=function ()
{
Directly written on the tag for inline style, written in head-style for internal style, link introduced to the external style
inline style, which can be obtained by Dom.style. Style name, it should be noted that the style name is the hump format
Internal styles and external styles are not available through the style. The name is Currentstyle. getComputedStyle to get
In fact, this is very well understood, inline style, when the tag has the style attribute (the property value returns an Object object), then we can get the name of the style.
Internal or external, although the style property, but the corresponding value is empty, so only through Currentstyle | | getComputedStyle to get
Alert ($ (' div2 '). style); As you can see, the pop-up result is object, which means that style exists, except that the appropriate style is set to null.
$ (' testcontent '). Innerhtml= ';
var str=$ (' div '). Style.stylefloat | | $ (' div '). style.cssfloat; Because float is a reserved word, therefore, can not be style.float, but with Ies:stylefloat, ff:cssfloat
str=str+ ($ (' div '). style.width+ ' <br/> ');
str=str+ ($ (' Div2 '). style.width+ ' <br/> '); This section is not able to get the internal style, display null value, but not that style does not exist
str=str+ ($ (' Div2 '). width+ ' <br/> '); Returns undefined because the Width property is not set for the DIV2 Dom
Str=str+getstyle ($ (' div2 '), ' width '); The Div2 style is provided through an internal style, so through Currentstyle | | getComputedStyle to get
$ (' testcontent '). Innerhtml=str;
}
$ (' Btnupdateclick '). Onclick=function ()
{
When you set a style, whether inline, internal, or external, you can get to the Style property (object) in 3 ways anyway.
Then you can set the style for the element by using it, there are 3 ways to set the style
$ (' div '). style.width= ' 200px ';
$ (' Div2 '). style.width= ' 100px ';
$ (' div '). style.csstext= ' Background:blue;color:red;font-weight:bold; will cover the original definition, equivalent to the definition of style= "background:blue;font-size:red;font-weight:bold;"
$ (' Div2 '). Classname= ' Testclassname '; Equivalent to Setting <div class= "Testclassname"/>
}
]]>
</script>
Demo Code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title> Test by Mcjeremy&xu </title& Gt <meta name= "generator" content= "EditPlus"/> <meta name= "author" content= ""/> <meta name= "keywords" cont Ent= "" "/> <meta name=" description "content=" "/> <style" type= text/css "> #div2 {width:200px; height:100px; margin-left:120px; border:1px dashed blue; }. testclassname {background:red; } </style> </pead> <body> <div id= "div" >div 1</div> <div id= "Div2" >div v> <div id= "testcontent" ></div> <button id= "Btngetclick" > Get value </button> <button id= " Btnupdateclick "> Set value </button> <script type=" Text/javascript ">//<! [cdata[function $ (obj) {return document.getElementById (obj); } function GetStyle (obj,sTylename) {if (Obj.currentstyle)//for ies {return obj.currentstyle[stylename];//note acquisition mode} else//for others {re Turn Document.defaultView.getComputedStyle (obj,null). GetPropertyValue (StyleName); Return Document.defaultView.getComputedStyle (Obj,null) [stylename]; } $ (' Btngetclick '). Onclick=function () {//directly written on tag for inline style, written in head-style for internal style, link introduced as external style//inline style, can be obtained by Dom.style. Style name, note that the style name is the hump format//inner style and external style through style. The name is not available and needs to be passed through the Currentstyle | | getComputedStyle to get//In fact, this is very well understood, inline style, when the tag has the style attribute (the property value returns an Object object), then we can get//through the style name, while the internal or external, although there is a style property, But the corresponding value is empty, so it is only through Currentstyle | | getComputedStyle to get//alert ($ (' div2 '). style); As you can see, the pop-up result is object, which means that style exists, except that the appropriate style is set to null. $ (' testcontent '). Innerhtml= '; var str=$ (' div '). Style.stylefloat | | $ (' div '). style.cssfloat; Because float is a reserved word, it cannot be style.float, but with Ies:stylefloat, ff:cssfloat str=str+ (' div '). style.width+ '); str=str+ ($ (' Div2 '). style.width+ '); This section is not able to get an internal style that displays a null value, but does not say that style does not exist str=str+ (' Div2 '). WidtH+ '); Returns undefined because there is no width property for the Div2 Dom Str=str+getstyle (' Div2 '), ' width '); The Div2 style is provided through an internal style, so through Currentstyle | | getComputedStyle to get $ (' testcontent '). Innerhtml=str; } $ (' Btnupdateclick '). Onclick=function () {//Set style, whether inline, internal or external, anyway, in these 3 ways, you can get to the Style property (object)///That you can set the style for the element, There are 3 kinds of $ (' div ') to set the style. Style.width= ' 200px '; $ (' Div2 '). style.width= ' 100px '; $ (' div '). style.csstext= ' Background:blue;color:red;font-weight:bold; Will overwrite the original definition, which is equivalent to defining $ (' Div2 '). Classname= ' Testclassname '; Equivalent to Setting <div class= "Testclassname"/>}//]]> </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
