Question

33

Set a thin border using .css() in javascript

rated 0 times [ 34] [ 1] / answers: 1 / hits: 125166 / 12 Years ago, tue, june 19, 2012, 12:00:00

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)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jericho

Add To Favorites

Follow

Total Points: 204

Total Questions: 98

Total Answers: 108

Location: Thailand

Member since Thu, Apr 22, 2021

3 Years ago

answered 12 Years ago isaacvalentinn · Accepted Answer

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: http://jsfiddle.net/gorelative/tVbvF/

jsfiddle with animate: http://jsfiddle.net/gorelative/j9Xxa/
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()