www.webdeveloper.com
Results 1 to 3 of 3

Thread: Is this possible: document.+variable+.style.+variable?

  1. #1
    Join Date
    Apr 2011
    Posts
    14

    Is this possible: document.+variable+.style.+variable?

    Hi,

    Is it possible to have something like the following?

    Code:
    document.VARIABLE1.style.VARIABLE2 = (some color);
    Thanks for any ideas.
    Last edited by Ennasio; 12-25-2012 at 06:48 AM.

  2. #2
    Join Date
    Nov 2012
    Location
    Jakarta
    Posts
    42

    Lightbulb Yes, you can

    I am not sure why you would want to do that, but yes, it is possible.

    Just make sure it is the right syntax. And you reference by "id", not by "name".

    It makes a lot more sense to simply use document.getElementById() then continue from there.

    For example, you have some elements called "element1", "element2", "element3".

    You want to put different value for each of them.

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    
    <div id="element1">1</div>
    <div id="element2">2</div>
    <div id="element3">3</div>
    
    <script>
    for (i = 1; i < 4; i++)
    {
       var someelement = document.getElementById("element" + i);
       alert(someelement.innerHTML);
    }
    
    </script>
    
    
    
    </body>
    </html>
    Note the position of the <script> is after the <div>. Putting <script> at the top will not work, because the div cannot be identified.

    You can check out www.w3schools.com if you want to learn about javascript. It has saved my coding life several times. I learn a lot from that website.

    You can also check for any errors using the Javascript Error Console, just look for it under "Tools" and look for "Error Console" or "Javascript Console" or something like that. I do use it frequently to debug javascript code on Chrome and Firefox.

    Good Luck!

  3. #3
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    A short example:
    Code:
    <div id="someElement">Hello</div>
    <div id="anotherElement">World</div>
    <script>
    
    	function setStyle(elementId, styleName, value) {
    		var element = document.getElementById(elementId);
    		element.style[styleName] = value;
    	}
    	setStyle('someElement', 'border', '2px solid blue');
    	setStyle('anotherElement', 'backgroundColor', 'red');
    
    </script>
    New to web development or in need of a good reference? Check out the Mozilla Developer Network or W3Schools.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles