www.webdeveloper.com
Results 1 to 3 of 3

Thread: Using Javascript to change CSS pseudo-classes

  1. #1
    Join Date
    Mar 2010
    Posts
    1

    Using Javascript to change CSS pseudo-classes

    Hello,

    I am trying to use javascript to replace colors in css classes with hex values from a color selector (jscolor). It's working for basic classes and ids, but the stylesheet I need to work with contains contextual CSS and pseudo-classes and I can't figure out how to reference them. (The stylesheet I'm working with is pre-defined and I can't change it.)

    The jscolor input field:

    Code:
        <input class="color"
    	onchange="updateText(this.color.toString())" />

    The function:

    Code:
    function updateText(color) {
    	document.getElementsByClass('myClassName')[0].style.color = '#'+color
    }

    Like I said, this works fine with simple classes. But I don't know how to get Javascript to replace the colors with the CSS I have to work with:

    Code:
    .ymp-color-text-main:link
    {
    	color:#0075b9;
    }
    
    
    #ymp-tray ul li a.playing {
         background-color:#d4d4d4;
         color: #0075b9;
    }
    
    
    #ymp-tray ul li a:hover,
    #ymp-tray ul li a.ymp-tray-track-focus {
         background-color:#555555;
         color:#FFFFFF;
    }
    How do I reference these? I don't know Javascript that well, I'm just a prototyper -- and I'm stumped!

  2. #2
    Join Date
    May 2003
    Location
    Between Baltimore and DC
    Posts
    3,579
    only way to alter the pseudo is to change/add the rules in the style sheet

    IE:
    Code:
    document.styleSheets[0].addRule('a:hover', 'color: green', 0);
    other:
    Code:
    document.styleSheets[0].insertRule('a:hover { color: green; }', 0);
    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint] | twitter | linkedin | http://www.pascarello.com

  3. #3
    Join Date
    Feb 2006
    Posts
    2,927
    Alien is right, the way to do this is to write a new rule.
    But I would add it to the end of the last style sheet,
    not the beginning of the first.

    You can add some pseudo attributes in some browsers, but that isn't good enough for actual code.

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