Home > Developer > Web Develop
About JS in Style,currentstyle and getcomputedstyle a few places to note
(1) With the JS style can only get the element inline style , internal style and external style using style is not obtained.
(2) Currentstyle can compensate for the lack of style (can get inline style, internal style and external style), but only for IE.
(3) getComputedStyle has the same effect as Currentstyle, but applies to FF, Opera, Safari, Chrome.
Attention:
① Currentstyle and getComputedStyle can only be used to get the style of a page element and cannot be used to set related values.
② If you want to set the appropriate value, you should use the style.
Add:
Inline: styles are defined in a single HTML element, such as <p style= "FONT-SIZE:16PX;" > Test Examples </p>
Internal style sheet: style definition in the header element of an HTML page
External style sheet: Defines a style in an external CSS file (. css file), referenced by an HTML page to a style sheet file
Assurance of compatible practices
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"Xml:lang= "en"><Head> <Metahttp-equiv= "Content-type"content= "Text/html;charset=utf-8"> <Metaname= "Apple-mobile-web-app-capable"content= "Yes"> <Metaname= "Viewport"content= "Width=device-width, User-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Get CSS style property values in JS</title> <styletype= "Text/css">#div1{width:200px;Height:200px;background:Red; } </style></Head><Body> <DivID= "Div1"style= "width:100px;"> </Div></Body><Scripttype= "Text/javascript">window.onload=function(){ varOdiv=document.getElementById ('Div1'); Console.log (GetStyle (Odiv,'width')); //100px} functionGetStyle (obj, attr) {//only applicable to IE if(obj.currentstyle) {returnObj.currentstyle[attr]; }Else{ //Suitable for Ff,chrome,safa returngetComputedStyle (obj,false) [attr]; }} </Script></HTML>
If you think the article is good, please Bo Master drink a cup of tea Oh!!!
Get CSS style property values in JS
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
