use setattribute to change color (in chat)

Question

I want to change the chat window fontcolor/fontsize of the page younow. I tried 2 'cssText' samples but I'm unable to change the font color to RED. How can I change the chat window font color to RED? I'm using Firefox and greasemonkey.

sample 1:
document.getElementById("chatcomments").style.cssText = 'font-size: 36px; color: red !important;'

sample 2:
document.querySelector(".chatcomments span").style.cssText = 'font-size: 36px; color: red !important;'

click to see the chatimage

Are you trying to make a browser extension/custom JavaScript to modify the page client-side? — AStopher, Apr 09 '17 at 11:52
Is it possible there is another style that is conflicting with it? It could be that the style sheet is setting a style as important for that element. — Mark Skelton, Apr 09 '17 at 11:54
@cybermonkey: Yes I want to make a custom JavaScript (I use Firefox and greasemonkey) — Heiko, Apr 09 '17 at 11:57

score 2 · Answer 1 · answered Apr 09 '17 at 12:10

2

you need to be specific with the attributes of the style object:

document.getElementById("chatcomments").style.color    = "red";
document.getElementById("chatcomments").style.fontSize = "30px";

answered Apr 09 '17 at 12:10

Shota Papiashvili

690
5
14

score 0 · Answer 2 · edited May 23 '17 at 12:10

0

If you use JQuery, you can use the css function, like so:

$(".chatcomments > span").css("color", "red");

You do not need to set font-size again if it already has been set. Another issue is that .chatcomments span won't work as they're two different things; instead, > will work: .chatcomments > span.

It is also better to use RGB or hexadecimal values instead of colour names, for example:

$(".chatcomments > span").css("color", "#EE4B38"); //RGB
$(".chatcomments > span").css("color", "rgb(238, 75, 56)"); //Hex

In the case that you're trying to create a custom client-side script in Tampermonkey or Greasemonkey (it looks like you are), you must use // @require to import the JQuery source (as seen in this answer):

// @require http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js

edited May 23 '17 at 12:10

Community

1
1

answered Apr 09 '17 at 11:50

AStopher

4,207
11
50
75

how can I use your JQuery code in greasemonkey? I'm using Firefox and greasemonkey. – Heiko Apr 09 '17 at 11:56
your JQuery code doesn't work - did you try your code on younow.com? – Heiko Apr 09 '17 at 13:11
@Heiko Please take a screenshot of your developer console. – AStopher Apr 09 '17 at 13:17
there was ONE red highlighted error in firefox developer console when I used the jquery 1.9.1 version you posted. Then I used the 1.10.1 jquery version (the errror vanished then). But: the code doesn't change font color to RED. -Did you try your code on younow.com? – Heiko Apr 09 '17 at 14:42
@Heiko Did you use my instructions to **not** use `red`? – AStopher Apr 09 '17 at 14:43
@Heiko If you continue to be rude, I will not help you. What happens if you apply to just `span` (and use the RGB red that I provided you with, you're currently using black). – AStopher Apr 09 '17 at 14:47
I used: $(".chatcomments > span").css("color", "#EE0000"); and this doesn't change the color to red. – Heiko Apr 09 '17 at 14:57
@Heiko Please read my reply again: `$("span").css("color", "rgb(255,0,0)");` – AStopher Apr 09 '17 at 14:58
works with jquery 1.11.0 (meaning all font colors are red now). But unfortunately if a user writes a comment to the chat, the new font color will be black. Hmm, seems I have to start a new thread for this new problem. – Heiko Apr 09 '17 at 15:12
@Heiko It seems that it refreshes the `iframe` rather than doing a proper fetch & update (lazy programming), there's not much you can do about that. – AStopher Apr 09 '17 at 15:16

score 0 · Answer 3 · answered Feb 09 '20 at 11:08

0

el.style.setProperty('color', 'red'); seems more right

answered Feb 09 '20 at 11:08

liron_hazan

1,396
2
19
27

use setattribute to change color (in chat)

3 Answers3