Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,963
    Thanks
    120
    Thanked 76 Times in 76 Posts

    js applayed style / restore original css rules ?

    Test page:
    http://agrozoo.net/jsp/test4.html

    Code:
    <!DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
        <title>
        </title>
    
         <style type="text/css">
           .b
           {
             visibility:visible;
           }
    
           .a span
           {
             background-color:red;
           }
           .a:hover .b
           {
             visibility:hidden;
           }
    
          </style>
    
      </head>
      <body>
      1. move mouse over aaa<br />
      2. <span onClick ="document.getElementById('target').style.visibility = 'visible'">click</span><br />
      3.move mouse over aaa<br />
      4. why does css rule not working anymore ? How to restore css behaviour ?<br />
      <br />
      <br />
      <div class ="a">
        <span>aaa</span>
          <br />
          <br />
          <div id ="target"class ="b">
            bbb
          </div>
      </div>
    
    
      </body>
    </html>
    Found a flower or bug and don't know what it is ?
    agrozoo.net galery
    if you don't spot search button at once, there is search form:
    agrozoo.net galery search

  • #2
    New to the CF scene
    Join Date
    Aug 2011
    Location
    USA
    Posts
    4
    Thanks
    1
    Thanked 1 Time in 1 Post
    When you use javascript to alter an element's style you are adding it as inline style (in other words, you are adding a "style" attribute to the element's tag) and in CSS terms, you cascade the style from header CSS to inline CSS. This means that the inline CSS overrides what is in the header (or within <style> tags in general).

    So to fix that, you can use the javascript function "removeAttribute()" to get your cascading back the way you want it:

    Code:
    document.getElementById('target').removeAttribute('style');
    I believe that should do it...

  • Users who have thanked Occam's Razor for this post:

    BubikolRamios (11-11-2011)

  • #3
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,963
    Thanks
    120
    Thanked 76 Times in 76 Posts
    Quote Originally Posted by Occam's Razor View Post
    adding it as inline style
    Was thinking about that, but needed to hear it for sure.

    Anyway the removeAttribute('style'); thing deletes inline style (not added by js) also, so one should be careful.
    Found a flower or bug and don't know what it is ?
    agrozoo.net galery
    if you don't spot search button at once, there is search form:
    agrozoo.net galery search


  •  

    Posting Permissions

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