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:

<         


        

Answer 1

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...

  
    
  
  

  
    Swap left positions function with styles defined inline.
    Test 1

    

      

      

    
    
  

  
    

    Identical function with styles defined in stylesheet.
    Test 2

    

      

      

    
    
    
  

  

I hope this helps to illuminate the issue.

Skip