Changing CSS Values with Javascript

Question

It s easy to set inline CSS values with javascript  If I want to change the width and I have html like this    lt div style  width  10px  gt  lt  div gt    All I need to do is   document getElementById  id   style width   value    It will change the inline stylesheet values  Normally this isn t a problem  because the inline style overrides the stylesheet  Example    lt style gt      tId         width  50         lt  style gt    lt div id  tId  gt  lt  div gt    Using this Javascript   document getElementById  tId   style width    30      I get the following    lt style gt      tId         width  50         lt  style gt    lt div id  tId  style  width  30    gt  lt  div gt    This is a problem  because not only do I not want to change inline values  If I look for the width before I set it  when I have    lt div id  tId  gt  lt  div gt    The value returned is Null  so if I have Javascript that needs to know the width of something to do some logic  I increase the width by 1   not to a specific value   getting back Null when I expect the string  50   doesn t really work   So my question  I have values in a CSS style that are not located inline  how can I get these values  How can I modify the style instead of the inline values  given an id

User · Answer

You can get the  computed  styles of any element   IE uses something called  currentStyle   Firefox  and I assume other  standard compliant  browsers  uses  defaultView getComputedStyle    You ll need to write a cross browser function to do this  or use a good Javascript framework like prototype or jQuery  search for  getStyle  in the prototype javascript file  and  curCss  in the jquery javascript file    That said if you need the height or width you should probably use element offsetHeight and  element offsetWidth      The value returned is Null  so if I have Javascript that needs to know the width of something to do some logic  I increase the width by 1   not to a specific value    Mind  if you add an inline style to the element in question  it can act as the  default  value and will be readable by Javascript on page load  since it is the element s inline style property    lt div style  width 50   gt      lt  div gt

User · Answer

I don t know why the other solutions go through the whole list of stylesheets for the document  Doing so creates a new entry in each stylesheet  which is inefficient  Instead  we can simply append a new stylesheet and simply add our desired CSS rules there   style document createElement  style    document head appendChild style   stylesheet style sheet  function css selector property value        try  stylesheet insertRule selector      property     value     stylesheet cssRules length         catch err        Note that we can override even inline styles set directly on elements by adding    important  to the value of the property  unless there already exist more specific   important  style declarations for that property

User · Answer

Please  Just ask w3  http   www quirksmode org dom w3c css html   Or actually  it took me five hours    but here it is   function css selector  property  value        for  var i 0  i lt document styleSheets length i       Loop through all styles           Try add rule         try   document styleSheets i  insertRule selector       property     value      document styleSheets i  cssRules length             catch err   try   document styleSheets i  addRule selector  property     value    catch err       IE           The function is really easy to use   example    lt div id  box  class  boxes  onclick  css   box    color    red    gt Click Me  lt  div gt  Or   lt div class  boxes  onmouseover  css   boxes    color    green    gt Mouseover Me  lt  div gt  Or   lt div class  boxes  onclick  css  body    border    1px solid  3cc    gt Click Me  lt  div gt    Oh    EDIT  as  user21820 described in its answer  it might be a bit unnecessary to change all stylesheets on the page  The following script works with IE5 5 as well as latest Google Chrome  and adds only the above described css   function    function  scope           Create a new stylesheet in the bottom        of  lt head gt   where the css rules will go     var style   document createElement  style        document head appendChild style       var stylesheet   style sheet      scope css   function  selector  property  value               Append the rule  Major browsers          try   stylesheet insertRule selector      property     value      stylesheet cssRules length             catch err   try   stylesheet addRule selector  property     value       pre IE9            catch err   console log  Couldn t add style          alien browsers           window

User · Answer

This simple 32 lines gist lets you identify a given stylesheet and change its styles very easily   var styleSheet   StyleChanger  my custom identifier    styleSheet change  darkolivegreen    blue

User · Answer

Gathering the code in the answers  I wrote this function that seems running well on my FF 25   function CCSStylesheetRuleStyle stylesheet  selectorText  style  value        returns the value of the element style of the rule in the stylesheet      If no value is given  reads the value      If value is given  the value is changed and returned      If     empty string  is given  erases the value       The browser will apply the default one         string stylesheet  part of the  css name to be recognized  e g   default      string selectorText  css selector  e g    myId     myClass    thead td      string style  camelCase element style  e g   fontSize      string value optionnal   the new value        var CCSstyle   undefined  rules    for var m in document styleSheets       if document styleSheets m  href indexOf stylesheet     -1        rules   document styleSheets m  document all    rules     cssRules         for var n in rules          if rules n  selectorText    selectorText            CCSstyle   rules n  style           break                       break              if value    undefined      return CCSstyle style    else     return CCSstyle style    value     This is a way to put values in the css that will be used in JS even if not understood by the browser  e g  maxHeight for a tbody in a scrolled table   Call    CCSStylesheetRuleStyle  default     mydiv    height     CCSStylesheetRuleStyle  default     mydiv    color     EEE

User · Answer

Ok  it sounds like you want to change the global CSS so which will effictively change all elements of a peticular style at once   I ve recently learned how to do this myself from a Shawn Olson tutorial   You can directly reference his code here   Here is the summary   You can retrieve the stylesheets via document styleSheets   This will actually return an array of all the stylesheets in your page  but you can tell which one you are on via the document styleSheets styleIndex  href property   Once you have found the stylesheet you want to edit  you need to get the array of rules   This is called  rules  in IE and  cssRules  in most other browsers   The way to tell what CSSRule you are on is by the selectorText property   The working code looks something like this   var cssRuleCode   document all    rules     cssRules     account for IE and FF var rule   document styleSheets styleIndex  cssRuleCode  ruleIndex   var selector   rule selectorText     maybe   tId  var value   rule value               both selectorText and value are settable    Let me know how this works for ya  and please comment if you see any errors

User · Answer

I ve never seen any practical use of this  but you should probably consider DOM stylesheets  However  I honestly think that s overkill   If you simply want to get the width and height of an element  irrespective of where the dimensions are being applied from  just use element offsetWidth and element offsetHeight

User · Answer

Perhaps try this   function CCSStylesheetRuleStyle stylesheet  selectorText  style  value     var CCSstyle   undefined  rules    for var m in document styleSheets       if document styleSheets m  href indexOf stylesheet     -1        rules   document styleSheets m  document all    rules     cssRules         for var n in rules          if rules n  selectorText    selectorText            CCSstyle   rules n  style           break                       break              if value    undefined      return CCSstyle style    else     return CCSstyle style    value

User · Answer

I don t have rep enough to comment so I ll format an answer  yet it is only a demonstration of the issue in question   It seems  when element styles are defined in stylesheets they are not visible to getElementById  someElement   style  This code illustrates the issue    Code from below on jsFiddle   In Test 2  on the first call  the items left value is undefined  and so  what should be a simple toggle gets messed up  For my use I will define my important style values inline  but it does seem to partially defeat the purpose of the stylesheet   Here s the page code      lt html gt     lt head gt       lt style type  text css  gt         test2a          position  absolute          left  0px          width  50px          height  50px          background-color  green          border  4px solid black                 test2b          position  absolute          left  55px          width  50px          height  50px          background-color  yellow          margin  4px               lt  style gt     lt  head gt     lt body gt      lt  -- test1 -- gt      Swap left positions function with styles defined inline       lt a href  javascript test1     gt Test 1 lt  a gt  lt br gt       lt div class  container  gt         lt div id  test1a  style  position  absolute left  0px width  50px  height  50px background-color  green border  4px solid black   gt  lt  div gt         lt div id  test1b  style  position  absolute left  55px width  50px  height  50px background-color  yellow margin  4px   gt  lt  div gt       lt  div gt       lt script type  text javascript  gt       function test1           var a   document getElementById  test1a           var b   document getElementById  test1b           alert a style left     -     b style left          a style left    a style left     0px     55px     0px          b style left    b style left     0px     55px     0px               lt  script gt     lt  -- end test 1 -- gt      lt  -- test2 -- gt       lt div id  moveDownThePage  style  position  relative top  70px   gt      Identical function with styles defined in stylesheet       lt a href  javascript test2     gt Test 2 lt  a gt  lt br gt       lt div class  container  gt         lt div id  test2a  gt  lt  div gt         lt div id  test2b  gt  lt  div gt       lt  div gt       lt  div gt       lt script type  text javascript  gt       function test2           var a   document getElementById  test2a           var b   document getElementById  test2b           alert a style left     -     b style left          a style left    a style left     0px     55px     0px          b style left    b style left     0px     55px     0px               lt  script gt     lt  -- end test 2 -- gt      lt  body gt   lt  html gt    I hope this helps to illuminate the issue   Skip

[javascript] Changing CSS Values with Javascript

Examples related to javascript

Examples related to html

Examples related to css

Examples related to ajax

Examples related to dom