Home > Developer > JavaScript
Copy codeThe Code is 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]; // pay attention to the acquisition method.
}
Else // for others
{
Return document. defaultView. getComputedStyle (obj, null). getPropertyValue (styleName );
// Return document. defaultView. getComputedStyle (obj, null) [styleName];
}
}
$ ('Btngetclick'). onclick = function ()
{
// Embedded styles are written directly on tags, internal styles are written in head-style, and external styles are introduced by link.
// Embedded style, which can be obtained through Dom. style. style name. Note that the style name is in camper format.
// Internal and external styles cannot be obtained through style. style name, which must be obtained through currentStyle | getComputedStyle
// In fact, this is easy to understand. When embedding a style, the tag has the style attribute (the object returned by this attribute value), and we can get it by style. style name.
// When the style attribute exists inside or outside, but the corresponding value is null, it can only be obtained through currentStyle | getComputedStyle
// Alert ($ ('div2'). style); you can see that the pop-up result is object, indicating that the style exists, but the corresponding style under it is set to null.
$ ('Testcontent'). innerHTML = '';
Var str = $ ('div '). style. styleFloat | character ('div'character .style.css Float; // because float is a reserved word, no style is allowed. float, while ies: styleFloat, ff: cssFloat
Str = str + ($ ('div '). style. width +' <br/> ');
Str = str + ($ ('div2 '). style. width + '<br/>'); // The internal style cannot be obtained and a null value is displayed, but the style does not exist.
Str = str + ($ ('div2'). width + '<br/>'); // return undefined because the width attribute is not set for the div2 dom.
Str = str + getStyle ($ ('div2'), 'width'); // The div2 style is provided through the internal style, so it is obtained through currentStyle | getComputedStyle
$ ('Testcontent'). innerHTML = str;
}
$ ('Btnupdateclick'). onclick = function ()
{
// You can obtain the style attribute (object) in either embedded, internal, or external mode)
// You can set the style for the element. There are three ways to set the style:
$ ('Div '). style. width = '200px ';
$ ('Div2'). style. width = '100px ';
Watermark ('div').style.css Text = 'background: blue; color: red; font-weight: bold; '; // overwrites the original definition, which is equivalent to defining 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> <meta name = "generator" content = "editplus"/> <meta name = "author" content = ""/> <meta name = "keywords" content = ""/> <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 1 Div 2 <button id = "btnGetClick"> get value </button> <button id = "btnUpdateClick"> set value </button> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
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
