Question

I have Javascript code, modified from “Javascript: The Definitive Guide” (pages 442-444 or kindle location 14998), which creates a CSS style sheet and inserts rules. But I find that using the standardized approach it promotes does not work in Chrome:

JSFiddle #1

If the above code is run in Chrome, only the word “You!” turns orange. If I introduce an ugly hack, then it works ok in Chrome:

JSFiddle #2

Is this an error in the book, a bug in Chrome, or I messed up?

NOTE I am intentionally not using a library (e.g. jquery, etc.) for this exercise.

Answer 1

Line styleElt.innerHTML = styles; in

if (typeof styles === "string") {
// The argument is stylesheet text
if (styleElt) {
    styleElt.innerHTML = styles;
} else {

Recreates styleSheet object. styleSheet.styleSheet‘s value becomes detached from the document, which results in loss of all previously declared style rules.

Firefox works the same way as Chrome, so it looks like this is not a bug.