Changing css w/ javascript

Question

So I have a link, that when clicked, i want its css values to change. I can do that with this jquery code:

    $(".linkname").click(function(){
  $(this).css({'border-style' : 'solid', 'border-width' : '1px', 'border-color' : '#ec6163', 'color' : '#ec6163'});
  return false;
});

However, I also want the link's css values to revert to normal when I click the link with the altered css values a second time. I tried an if else sentence, but it always evaluated else and didn't work. How can i do this?

Welcome to the community; as this is your first question, I'm going to point you to the FAQ. Also, it's worth mentioning now that you should select the checkmark next to the answer that best answers your question. — zzzzBov
– zzzzBov, Commented Feb 19, 2011 at 9:16

Bryan Downing · Accepted Answer · 2011-02-19 08:50:38Z

5

Even better, put all of that CSS into a class and use toggleClass to switch.

/* CSS */
.someclass { border: 1px solid #ec6163; color: #ec6163; }

/* JS */
$(".linkname").click(function(){
    $(this).toggleClass('someclass');
    return false;
});

answered Feb 19, 2011 at 8:50

Bryan Downing

15.5k3 gold badges43 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dawson Over a year ago

I think it depends on the situation, or rather the amount of use within the site. Toggling an input button on a contact page (one JS function). Toggling links, divs, etc. site-wide toggleClass/commented CSS - IMHO

Dawson · Accepted Answer · 2011-02-19 09:17:20Z

3

Have you tried using toggle()?

$('.linkname').toggle( function() {
        $(this).css({'border-style' : 'solid', 'border-width' : '1px', 'border-color' : '#ec6163', 'color' : '#ec6163'});
    }, function() {
        $(this).css({'border-style' : 'dotted', 'border-width' : '0px', 'border-color' : '#999999', 'color' : '#cc6163'});
});

edited Feb 19, 2011 at 9:17

answered Feb 19, 2011 at 8:37

Dawson

7,5871 gold badge28 silver badges25 bronze badges

4 Comments

Hubrid Over a year ago

wow. thanks a ton. you just saved me a couple of hours. tytytyty

Dawson Over a year ago

No problem. Had a similar issue myself recently.

Yi Jiang Over a year ago

You can use this.style.borderColor = instead of having to call $ to use the css() function

Dawson Over a year ago

@Yi - You're right, but I was just trying to show the toggle function. With the amount of styles he's changing, I'd still call the css() function. (Answer edited to show all CSS changes in one line)

threenplusone · Accepted Answer · 2011-02-19 08:24:35Z

1

I am not sure why your if/else statement didn't work.
Perhaps try using a variable outside of the method to save which state the link is in.

eg.

var link_state = 1;

$(".linkname").click(function(){
  if (link_state == 1) {
    $(this).css({'border-style' : 'solid', 'border-width' : '1px', 'border-color' : '#ec6163', 'color' : '#ec6163'});
    link_state = 0;
  }
  else {
    $(this).css({'border-style' : 'none', 'border-width' : '0px', 'border-color' : '#ffffff', 'color' : '#ffffff'});
    link_state = 1;
  }
  return false;
});

answered Feb 19, 2011 at 8:24

threenplusone

2,13220 silver badges29 bronze badges

3 Comments

user241244 Over a year ago

You forgot the variable's underscore in the IF.

threenplusone Over a year ago

@D_N : It appear to be there for me, unless I misunderstand.

user241244 Over a year ago

Hm, right you are. My mobile browser, Opera Mini, won't display it, for whatever dumb, quirky reason. Sorry for the false alarm.

Collectives™ on Stack Overflow

Changing css w/ javascript

3 Answers 3

1 Comment

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related