www.webdeveloper.com
Results 1 to 7 of 7

Thread: Cannot change CSS style opacity by using Javascript

  1. #1
    Join Date
    Apr 2014
    Posts
    5

    Cannot change CSS style opacity by using Javascript

    I have a div inside the body on the same level as other divs.

    Code:
    <div id="soverlay">
        <h1 class="abc">Header<br/>is required</h1>
        <p class="jkl">Paragraph</p>
    </div>
    and its CSS inside <header> among other styles:

    Code:
    <style type="text/css" media="screen"> 
    
    #soverlay  {
        width:330px;
        margin: 100px auto;
        border:1px solid #000000;
        padding:15px;
        text-align:left;				 
        z-index: 1000;
        opacity:0.0;				 
    }
    
    </style>

    Now inside <script>:

    Code:
    if (condition){  
                       
        var el = document.getElementById("soverlay");
        el.style.opacity="1.0";
    
    }
    Now the javascript code is totally ignored (which drives me crazy)!
    What's wrong?


    BTW is there a decent IDE with javascript code assistance (autocompletion, syntax check etc)?

  2. #2
    Join Date
    May 2014
    Posts
    834
    Are you sure your condition is true? Is the script running before or after the DOM is built?
    Java is to JavaScript as Ham is to Hamburger.

  3. #3
    Join Date
    Apr 2014
    Posts
    5
    -The condition is true

    -Newbie question: How can I identify when the Dom is built?

    BTW, I just saw a suggestion on this forum and for the first time I tried the Chrome's dev tools
    ...and I got the error: "Uncaught TypeError: Cannot read property 'style' of null"
    What null are they talking about? Isn't div id valid enough?

  4. #4
    Join Date
    Apr 2014
    Posts
    5
    OK, I figured out that the order of markup and script = execution order. When I placed the script after the div, there was no null error.

  5. #5
    Join Date
    May 2014
    Posts
    834
    That error likely means the document.getElementById failed, as it means that el == null and/or undefined.

    You can consider the DOM to be built, or at least constructed enough to access the elements on the page to be any point in the markup AFTER the element is declared. If you put that script BEFORE the element in the markup (like in <head></head>) the element won't exist yet on the DOM (document object model) so the document.getElementById can't see it yet.

    That is why (along with speeding up page loads) it's become common practice to put scripting right before </body>, as at that point in the markup all the DOM elements in the markup exist. It's also why some people wait until the 'onload' event fires.

    IF your script is before the element is in the markup, it's going to fail as that element hasn't been added to the DOM yet.

    Example:
    Code:
    <script type="text/javascript">alert(document.getElementById('test'));</script>
    <div id="test"></div>
    <script type="text/javascript">alert(document.getElementById('test'));</script>
    First alert will say "undefined" or "null" (depending on browser), second alert will say "Object DOMElement", "object HTMLDivElement" or something similar (again depending on browser)... I think that's the clearest way to show that in action. The first one fails because that element doesn't exist yet.

    ... and it's part of why more and more developers are moving scripting out of head, out of the middle of the markup, and to right before </body>.

    Really though, this is why it's VERY hard to diagnose problems from snippets, we can't see where you have your script or are including the script in the markup; so we can't say if it's failing for that reason, or maybe some other reason.

    -- edit -- sounds like you figured out what I meant. Good to hear.
    Java is to JavaScript as Ham is to Hamburger.

  6. #6
    Join Date
    Apr 2014
    Posts
    5
    Yeah, I figured out that a bit late...
    Thanks for the thorough explanation, those details are useful!

  7. #7
    Join Date
    Jun 2014
    Posts
    6
    Quote Originally Posted by deathshadow View Post
    Are you sure your condition is true? Is the script running before or after the DOM is built?
    Yes, it is showing true condition.

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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