javascriptjquerycolorsborder

Set a thin border using .css() in javascript

So I am trying to get a border around buttons on my page when the user clicks them.

To set up the handler I am going: 

$(".reportButtons").click(function(){ //change border color });

I have tried 2 ways to change the border color of the buttons in there. The first way is using the .css() function.

$(this).css({"border-color": "#C1E0FF", 
             "border-weight":"1px", 
             "border-style":"solid"});

But when I do it this way, the border is really fat (I want it to be hairline, like it normally would be if I set the width to 1px)

The other way I have tried is by downloading the jquery-color plugin, and doing something like:

$(this).animate({borderTopColor: "#000000"}, "fast");

When I do that, nothing happens. There is no error - just nothing happens. But if instead of trying to change the border color, I try to change the background color, it works fine....so am I using the jquery-color wrong? For reference, here is how I would change the background:

$(this).animate({ backgroundColor: "#f6f6f6" }, 'fast');

like I said, that works. When I downloaded jquery-color, I only downloaded the one file (jquery-color.js), if that makes a difference....

So how do I go about getting a hairline border? (I would prefer to use the animate() method if you have anyideas how to get that to work)

Solution

  • Current Example:

    You need to define border-width:1px.

    Your code should read:

    $(this).css({"border-color": "#C1E0FF", 
             "border-width":"1px", 
             "border-style":"solid"});

    Suggested Example:

    You should ideally use a class and addClass/removeClass

    $(this).addClass('borderClass');
$(this).removeClass('borderClass');

    And in your CSS:

    .borderClass{
  border-color: #C1E0FF;
  border-width:1px;
  border-style: solid;
  /** OR USE INLINE
  border: 1px solid #C1E0FF;
  **/
}

    jsfiddle working example:

    jsfiddle with animate:

    This just gives you an example of how it could work, you should get the idea. There are better ways of doing this most likely; like using a toggle().