Using Hex numbers in css setting w/Jquery

Question

I have this code that works as posted:

$('#cs_tableVideoListings tbody tr td').each(
    function() {
        $(this).css('border-bottom','2px solid gray');
    })

the issue is that "gray" is too dark. When I try #333 or any hex number, it doesn't work at all.

I only need to apply the bottom border, so using "border-bottom" : "2px solid #333" (note colon) doesn't work as that syntax seems to only work when applying multiple styles.

So, I'm wondering at to apply a hex color in the above code w/o getting ridiculous about assigning variables and such.

Thanks

Answer 1

Hi,

Try to long hand version #333333 instead of the short hand #333. I remember having trouble with the short hand CSS hex colors.

Or you could change your code to something like this:

$(this).css({
    borderBottomWidth: '2px',
    borderBottomStyle: 'solid',
    borderBottomColor: '#333333'
});

Note that the object keys that I passed is borderBottom (JS) instead of border-bottom (CSS). When you pass in an object to jQuery.css it should be the JavaScript equivalent of the style.

http://codepunk.hardwar.org.uk/css2js.htm

Answer 2

Your code is fine until you decided to add the colon.

You don't want the colon in there unless you're passing an object. The number format #333 works fine either way.

Try it out: http://jsfiddle.net/EXbL7/

$('#cs_tableVideoListings tbody tr td').each(
    function() {
              // separated with comma, you're passing 2 arguments
        $(this).css('border-bottom','2px solid #333');
    }
);

If you do want the colon, then you need to pass an object.

Try it out: http://jsfiddle.net/EXbL7/1/

$('#cs_tableVideoListings tbody tr td').each(
    function() {
              // separated with colon, you're passing 1 object argument
        $(this).css( {'border-bottom':'2px solid #333'} );
    }
);