How to get an HTML element s style values in javascript

Question

I am looking for a way to retrieve the style from an element that has a style set upon it by the style tag    lt style gt    box  width  100px    lt  style gt    In the body     lt div id  box  gt  lt  div gt    I m looking for straight javascript without the use of libraries   I tried the following  but keep receiving blanks   alert  document getElementById  box   style width     alert  document getElementById  box   style getPropertyValue  width       I noticed that I m only able to use the above if I have set the style using javascript  but unable to with the style tags

User · Answer

In jQuery  you can do alert     theid   css  width      -- if you haven t taken a look at jQuery  I highly recommend it  it makes many simple javascript tasks effortless   Update  for the record  this post is 5 years old  The web has developed  moved on  etc  There are ways to do this with Plain Old Javascript  which is better

User · Answer

You can make function getStyles that ll take an element and other arguments are properties that s values you want   const convertRestArgsIntoStylesArr        args     gt        return args slice 1      const getStyles   function          const args       arguments       const  element    args       let stylesProps       args  1  instanceof Array   args 1    convertRestArgsIntoStylesArr args        const styles   window getComputedStyle element       const stylesObj   stylesProps reduce  acc  v    gt            acc v    styles getPropertyValue v           return acc                   return stylesObj       Now  you can use this function like this   const styles   getStyles document body   height    width      OR  const styles   getStyles document body    height    width

User · Answer

The element style property lets you know only the CSS properties that were defined as inline in that element  programmatically  or defined in the style attribute of the element   you should get the computed style   Is not so easy to do it in a cross-browser way  IE has its own way  through the element currentStyle property  and  the DOM Level 2 standard way  implemented by other browsers is through the document defaultView getComputedStyle method   The two ways have differences  for example  the IE element currentStyle property expect that you access the CCS property names composed of two or more words in camelCase  e g  maxHeight  fontSize  backgroundColor  etc   the standard way expects the properties with the words separated with dashes  e g  max-height  font-size  background-color  etc    Also  the IE element currentStyle will return all the sizes in the unit that they were specified   e g  12pt  50   5em   the standard way will compute the actual size in pixels always   I made some time ago a cross-browser function that allows you to get the computed styles in a cross-browser way   function getStyle el  styleProp      var value  defaultView    el ownerDocument    document  defaultView       W3C standard way    if  defaultView  amp  amp  defaultView getComputedStyle           sanitize property name to css notation         hypen separated words eg  font-Size      styleProp   styleProp replace    A-Z   g   - 1   toLowerCase        return defaultView getComputedStyle el  null  getPropertyValue styleProp       else if  el currentStyle       IE        sanitize property name to camelCase     styleProp   styleProp replace   -  w  g  function str  letter          return letter toUpperCase                value   el currentStyle styleProp          convert other units to pixels on IE     if     d  em pt   ex    i test value            return  function value            var oldLeft   el style left  oldRsLeft   el runtimeStyle left          el runtimeStyle left   el currentStyle left          el style left   value    0          value   el style pixelLeft    px           el style left   oldLeft          el runtimeStyle left   oldRsLeft          return value           value             return value          The above function is not perfect for some cases  for example for colors  the standard method will return colors in the rgb      notation  on IE they will return them as they were defined   I m currently working on an article in the subject  you can follow the changes I make to this function here

User · Answer

I believe you are now able to use Window getComputedStyle     Documentation MDN  var style   window getComputedStyle element   pseudoElt      Example to get width of an element   window getComputedStyle document querySelector   mainbar    width

[javascript] How to get an HTML element's style values in javascript?

Update

Examples related to javascript

Examples related to html

Examples related to css

Examples related to stylesheet