Search code examples
javascriptcssfirefoxmoodlebookmarks

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

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;
}
Solution

  • 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.