How can I use a bookmark with javascript to alter a website css

Question

I'm not too good with colours and on a moodle course I'm tutoring I have a really difficult time spotting the difference in unread and read posts. The unread posts are highlighted but the colour is too similar to the background for me. Previously I've used a javascript bookmark in firefox to alter a website (select all for Amazon's AWS S3 which worked really well).

I'm trying to rework the AWS bookmark javascript to change the CSS of moodle page. So far I have:

javascript:(function () {
    document.domain = 'whatever.domain';
    var unread = document.querySelectorAll(".unread");
    for (var i = 0; i < unread.length; i++) {
        unread[i].style.background-color="blue";
        };
    })();

Using inspector to view the CSS the Span element CSS looks like this:

#page-mod-forum-view .unread, .forumpost.unread .row.header, .path-course-view .unread, span.unread {
background-color: #FFD;
}

https://www.w3schools.com/cssref/sel_visited.asp Check this out — Mihir Bhende, May 11 '17 at 11:25
You cam directory use it in css like a:visited{ background-color : blue;} — Mihir Bhende, May 11 '17 at 11:27
it's not `background-color` (background minus color), but `backgroundColor` — Ruslanas Balčiūnas, May 11 '17 at 11:28
Thanks, but I don't have access to the css apart from through a javascript bookmark. I'm trying to avoid having to use the developer tools inspector every time I want to change this — Oliver Burdekin, May 11 '17 at 11:28
@RuslanasBalčiūnas from the CSS in developer tools (see question), it looks a lot like background-color — Oliver Burdekin, May 11 '17 at 11:30
@RuslanasBalčiūnas I stand corrected! Thank you! it's working now — Oliver Burdekin, May 11 '17 at 11:31

score 1 · Accepted Answer · answered May 11 '17 at 11:36

Note that the property names are in camel-case and not kebab-case while setting the style using elt.style. (i.e. elt.style.fontSize, not elt.style.font-size)

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

So there should be backgroundColor instead of background-color in your bookmarklet JavaScript code.

How can I use a bookmark with javascript to alter a website css

1 Answers1