Home > Developer > Web Develop
In order to improve the user experience, we often dynamically modify the style of DOM nodes, various browser differences are relatively large, how do we respond? Keep trying, keep summing up!
1. Style, getComputedStyle, CurrentstyleInline style:
<!-- -
<style= "Width:30px;background-color: #ff6a00;" > I am stupid, completely vegetarian! </div>
The inline style has the highest precedence, and the style obtained by style is the most accurate var elm = document.getElementById (' J-demo '); usually this gets elm.style.width6 elm.style.backgroundColor inline style, external style:
<!--CSS -<Linkref= "stylesheet"href= "Demo.css"><style>. Demo{width:30px;Background-color:#ff6a00; }</style><!--Body -<DivID= "J-demo"class= "Demo">You want to see me so easilyMakeup？ It's not that easy ...</Div>
1 varElm = document.getElementById (' J-demo ')),2 Elmstyle;3 4Elm.style.xxx//only inline styles defined can be obtained5 6 //If the label does not define the associated inline style, you should do this:7Elmstyle = Elm.currentstyle? Elm.currentStyle.getAttribute (' Background-color '): window.getComputedStyle (Elm,NULL). GetPropertyValue (' Background-color ');8 9GetPropertyValue (name)//name do not use hump-named namesTenGetAttribute (name)//If you think of the damned IE6, name must be the hump named One A //Why not use the subscript [name] to get the property value? - //The browser has different names for the style attributes, such as float, some called cssfloat, some are called stylefloat
2. Screen Properties
3. Element view methods, properties// Monitor available width, height, does not include task bar availwidth, availheight // monitor screen width, height width
1 //let elements scroll to the viewable area2 scrollIntoView ()3 4 //The position of the upper-left corner of the content area relative to the upper-left corner of the entire element (including the border)5 ClientLeft6 ClientTop7 8 //height and width of the content area, including padding, excluding borders and scroll bars9 clientwidthTen clientheight One A //offset value relative to the nearest ancestor anchor element - offsetleft - OffsetTop the - //First ancestor anchor element (the element used to calculate offsetleft and offsettop) - offsetParent - + //the ffsetparent element is only possible in the following situations: - //1. <body> + //2. Position is not a static element A //3. <table>, <th> or <td>, but must be position:static at - //dimensions of the entire element (including borders) - offsetwidth - offsetheight - - //element scrolling pixel size, readable writable in scrollleft - scrolltop to + //The width and height of the entire content area, including hidden parts - ScrollWidth the scrollheight * //compatibility issue: When the outer element is not set overflow, but the content exceeds the outer element width, the browser gets a value that is inaccurate $ //Workaround: Set the overflow property to the outer layer element4. Mouse position
. Thingking1 // offset of mouse relative to window 2 Event.clientx 3 Event.clienty 4 5 // offset coordinates of the mouse relative to the display screen 6 Event.screenx 7 Event.screeny
Learn these common style processing methods, manipulate the DOM style, make a beautiful page style, will be more handy.
Reference:http://www.quirksmode.org/dom/w3c_cssom.html
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
