[Solved] Changing CSS in JavaScript

1

Let’s say I create my image CSS to be something like:

img {
  border: 5px solid;
  border-color: #35E415;
}

Is there a way I can change the border-color in JavaScript?

For the record, I’ve tried assigning the image an id, using getElementById, and changing it with .setAttribute and .style.borderColor. Neither have worked.

Essentially I’m trying to change the border color to red if the twitch channel is offline in this:

2

This should work: document.getElementById("fancyID").style.borderColor

3

I tried that too, didn’t work.

4

I tried this $('img').css('border-color','red'); and it worked (put it randomly in the js though…)

2 Likes
5

Wow I feel dumb. I was so caught up trying to use javascript I didn’t even consider jquery.

6

If you try to select your img with javascript, console.log() it to see what it returns…jQuery and JS simply don’t return the same thing, for js you might have to write something like

document.querySelector('img')[0]

7

Well turns out I spoke too soon. That did not work as intended but it did at least work to some extent. I should be able to solve the issue from here, I’m just busy right this minute. I’ll let you know when/how/if I get it to work.

8

My bad, didn’t read it good enough :neutral_face:

Since you are already checking if a channel is online or not, why not add a class of offline or online to each div? In your css you can use: .offline{ border-color: red; }

Using $('img').css('border-color','red'); will change all borders.

1 Like
9

Good idea. That’s cleaner than what I was going to do.

Got it.

 if (data.stream == null) {
      $('.'+ channel + 'on-off').append('Offline')
        $('.'+ channel + 'logo').addClass('offline');
   }

Works perfectly. Thanks guys.