Background color of inputs types button and submit, how to access

Discussion in 'Javascript' started by coolsti, May 20, 2005.

  1. coolsti

    coolsti Guest

    I have been playing around with this task for some hours now, and can't
    seem to find a way.

    I have an assortment of buttons on a web page, which have their background
    colors defined via style classes. I would like to define one set of
    rollover functions that would give the effect of darkening (or perhaps
    lightening) the background color when the mouse hovers over the button.

    That is, I would like a javascript function that can get a hold of the
    button's background color assigned via the class, and then just add or
    subtract a standard color value. This way, the effect would work no matter
    what the original button color was.

    Can this be done? I am trying to access the original button color in
    various ways, but can't seem to get a hold of it (property does not exist,
    or attribute is null, etc. etc.).

    I guess what I am trying to do is to avoid having to define extra "dark"
    classes for each of the classes used by the buttons on the page. Instead,
    I would like to just manipulate directly the background color, if this is
    possible.

    Thanks for any tips,

    - steve
    coolsti, May 20, 2005
    #1
    1. Advertising

  2. coolsti wrote:


    > I have an assortment of buttons on a web page, which have their background
    > colors defined via style classes. I would like to define one set of
    > rollover functions that would give the effect of darkening (or perhaps
    > lightening) the background color when the mouse hovers over the button.
    >
    > That is, I would like a javascript function that can get a hold of the
    > button's background color assigned via the class, and then just add or
    > subtract a standard color value. This way, the effect would work no matter
    > what the original button color was.
    >
    > Can this be done? I am trying to access the original button color in
    > various ways, but can't seem to get a hold of it (property does not exist,
    > or attribute is null, etc. etc.).
    >
    > I guess what I am trying to do is to avoid having to define extra "dark"
    > classes for each of the classes used by the buttons on the page. Instead,
    > I would like to just manipulate directly the background color, if this is
    > possible.


    It is difficult, you can get hold of a CSS value but as a CSS color
    value can be given in many different ways (e.g. a color name like
    'white', an rgb triple like rgb(255, 255, 255), a hex value like
    #ffffff) it is not that easy to take that value and manipulate it.

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
    Martin Honnen, May 20, 2005
    #2
    1. Advertising

  3. coolsti

    coolsti Guest

    On Fri, 20 May 2005 14:57:08 +0200, Martin Honnen wrote:

    > It is difficult, you can get hold of a CSS value but as a CSS color
    > value can be given in many different ways (e.g. a color name like
    > 'white', an rgb triple like rgb(255, 255, 255), a hex value like
    > #ffffff) it is not that easy to take that value and manipulate it.


    Hi Martin,

    thanks for the reply. I don't fear the part about manipulating the value,
    I could do some trick with that. What I can't figure out is how to get a
    hold of the value, and then perhaps how to set the value. Can you help
    with that? Like I said, I tried various things but I think my knowledge of
    syntax here is lacking. For example, if we call the button object as
    "myobject" for the sake of example, I tried

    myobject.bgColor, myobject.bgColor.value, myobject.attributes['bgColor']

    and all possible variants (except of course the correct one ;-).

    Any help appreciated.

    - steve
    coolsti, May 20, 2005
    #3
  4. coolsti wrote:


    > I don't fear the part about manipulating the value,
    > I could do some trick with that. What I can't figure out is how to get a
    > hold of the value,


    IE (since IE 5) has currentStyle, Mozilla and Opera have
    getComputedStyle as used here:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>computed style</title>
    <script type="text/javascript">
    function getComputedCSSValue (element, cssPropertyName) {
    var defaultView;
    if ((defaultView = document.defaultView) &&
    defaultView.getComputedStyle) {
    return defaultView.getComputedStyle(element, '')[cssPropertyName];
    }
    else if (element.currentStyle) {
    return element.currentStyle[cssPropertyName];
    }
    }

    function doTest (elementIds) {
    for (var i = 0; i < elementIds.length; i++) {
    var element = document.getElementById(elementIds);
    if (element) {
    output('p', 'computed background-color: ' +
    getComputedCSSValue(element, 'backgroundColor'));
    }
    }
    }

    function output (tagName, text) {
    var element = document.createElement(tagName);
    element.appendChild(document.createTextNode(text));
    document.body.appendChild(element);
    }

    window.onload = function (evt) {
    doTest(['p1', 'b1']);
    };
    </script>
    <style type="text/css">
    #p1 {
    background-color: lime;
    }
    #b1 {
    background-color: #CCCCCC;
    }
    </style>
    </head>
    <body>

    <h1>getComputedStyle test</h1>

    <p id="p1">Kibology for all.</p>

    <div>
    <input type="button" id="b1" value="example button">
    </div>

    </body>
    </html>

    But as said, you will have a lot of work then as the values returned are
    not normalized, in the above example IE 6 shows

    computed background-color: lime

    computed background-color: #cccccc

    while Mozilla 1.7 shows

    computed background-color: rgb(0, 255, 0)

    computed background-color: rgb(204, 204, 204)

    while Opera 8 shows

    computed background-color: #00ff00

    computed background-color: #cccccc


    As for setting values you only need to assign to
    element.style.backgroundColor

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
    Martin Honnen, May 20, 2005
    #4
  5. coolsti

    coolsti Guest

    On Fri, 20 May 2005 16:55:14 +0200, Martin Honnen wrote:

    Thanks Martin,

    I was not aware of this way of getting to styles, I think it is what I
    will need.

    I am not too worried about the interpretation of colors, I will just have
    to try it. For this application, which is internal to my company, the
    number of browsers is limited (mostly IE, sometimes Firefox), and the
    colors of the buttons I am dealing with are ones that I set in style sheet
    classes. So if I have these defined with #ffffff type notation, and don't
    coincide with a "known name", maybe things will be easier. No matter what
    format the returned value is in, as long as it is numeric of some sorts, I
    can make an algorithm to lighten or darken it.

    Thanks again!

    - steve
    coolsti, May 20, 2005
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Ghafran Abbas
    Replies:
    0
    Views:
    4,195
    Ghafran Abbas
    Oct 12, 2004
  2. fig000
    Replies:
    0
    Views:
    4,533
    fig000
    Sep 6, 2004
  3. Kamaljeet Saini
    Replies:
    0
    Views:
    391
    Kamaljeet Saini
    Feb 13, 2009
  4. Paul Oakfleet
    Replies:
    1
    Views:
    839
    Chris Riesbeck
    Sep 10, 2003
  5. Replies:
    1
    Views:
    258
    marss
    Feb 14, 2007
Loading...

Share This Page