www.webdeveloper.com
Results 1 to 7 of 7

Thread: overrid style

  1. #1
    Join Date
    Oct 2007
    Posts
    94

    [RESOLVED] overrid style

    What is the proper way of override a CSS style?

    One of my greasemonkey scripts simple deletes the class name then applies a "style" element directly. Buts its obviously not proper method....

    edit: Maybe one method would be to use HTML DOM to create a style in that page then simple add that to the "class"....
    Last edited by whatsInaName; 05-14-2009 at 07:46 AM.

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Usually you need to change only one or two CSS properties, neither the whole style nor the whole class. But if there are too many properties to be changed, the wisest way is to use classes (not local styles), to write a new CSS class, and use javascript only for switching the classes.

  3. #3
    Join Date
    Oct 2007
    Posts
    94
    oops, I found my mistake and I just learned something...

    I was setting the background to the TR, and nothing was happening until I removed the external CSS file. It was resolving my issue because the external CSS was not altering the TR it was altering the TD instead so firefox was giving that style a priority even tho it was from an external file way the hell up the chain.

    edit: But that kind of sucks... because it means I need to manually add a style for every single TD....
    Last edited by whatsInaName; 05-14-2009 at 07:48 AM.

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    the priority is (for all the browsers)

    - javascript css-on-the-fly (dynamical changing of the CSS properties);
    - local style
    - class

    Classes have also a priority (compounded than simple)

  5. #5
    Join Date
    Oct 2007
    Posts
    94
    well I was aware about that...

    but I was not aware that the TR background that came from "css-on-the-fly" was not taking priority over a css class because it was effecting the TD (the child of the TD).

    Looking at this over.... I think ill use JS (HTML DOM) to insert something called "myclass123" style with a background from my TD, then simple add that class to each TR that I want to change.... It will take priority over whatever and it will let me alter the TD.

  6. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>untitled</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <style type="text/css">
    #mytab td{
    background-color:#999999;
    }
    </style>
    <script type="text/javascript">
    function addEvents(){
    var cells=document.getElementById('mytab').getElementsByTagName('td'), i=0, c;
    while(c=cells[i++]){
    c.onclick=changeColor;
    }
    }
    function changeColor(){
    var newColor='#ff0000';
    this.style.backgroundColor=newColor;
    }
    onload=addEvents;
    </script>
    </head>
    <body>
    <table id="mytab" width="300" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td>click me</td>
        <td>click me</td>
      </tr>
      <tr>
        <td>click me</td>
        <td>click me</td>
      </tr>
    </table>
    
    </body>
    </html>

  7. #7
    Join Date
    Oct 2007
    Posts
    94
    well that is kind of over kill for what I want... in my script there are about 100 rows while all rows have many cells. Then based on certain data I want to change the color (and its not based on a click).

    Ive alreaady coded my solution. I simple create a style element, add the "type" attribute then the css using "innerHTML". From there I simple did "myell.className += " styleName"".

    Works good. Its less code then my previous stuff + now the page actually displays all the other CSS that I had removed :P
    Last edited by whatsInaName; 05-14-2009 at 08:29 AM.

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