Browser inconsistency when using JavaScript to generate JavaScript to generate inline style

I’m developing an app that assigns users different colored text (think Gravatar-like hash-generated user colors) [i.e. HashColors – may have to click “Run with JS”].

To integrate the HashColors script into the larger app, I created a function that sets the .textContent and .style for each user’s entry. .textContent appears to work cross-browser, but .style appears to only work in Firefox.

A full example is available at https://jsbin.com/sudave/9/edit?html,console,output (may have to click “Run with JS”), but I’m pretty sure the crux of my problem is within the following function or how I call it:

Element generation function:

var gE = function(selector, value, style) {
    var element = document.querySelector("ul " + selector);
    element.textContent = value || " ";  // <-- works as expected
    element.style = style || "";  // <-- does NOT work as expected !!!
                                  // i.e. works as expected in FF
                                  // does NOT work as expected in Chrome or Safari
    return element;
};

Example element generation function call:

 gE('.name', "White on Purple", "background: rgba(" + color + "); color: white");

where var color = "100, 000, 100, 100";

Can anybody tell me why this works as expected in Firefox, but not in other browsers? Better yet, can anybody make suggestions so that I can get it working cross-browser?

Working as expected in Firefox:

Working as expected in Firefox

NOT working as expected in Chrome:

enter image description here


Source: cross-browser

Leave a Reply