Set a thin border using css in javascript

Question

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

User · 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

User · Answer

After a few futile hours battling with a   SyntaxError  missing   after property id  message I can now expand on this topic   border-width is a valid css property but it is not included in the jQuery css oject definition  so  css  border-width   2px    will cause an error   but it s quite happy with  css   border-width    2px     presumably property names in quotes are just passed on as received

User · Answer

I d recommend using a class instead of setting css properties  So instead of this     this  css   border-color     C1E0FF                  border-width   1px                  border-style   solid       Define a css class    border       border-color   C1E0FF     border-width 1px     border-style solid       And then change your javascript to     this  addClass  border

User · Answer

Maybe just  border-width  instead of  border-weight   There is no  border-weight  and this property is just ignored and default width is used instead

[javascript] Set a thin border using .css() in javascript

Current Example:

Suggested Example:

Examples related to javascript

Examples related to jquery

Examples related to colors

Examples related to border