Question

First up, JavaScript is definitely not my native tongue. Nevertheless, I’ve been tasked with creating a web page where the user can use a colour picker to change CSS elements. These then need to be sent back to the server to be stored in a database. It’s all working so far except the last part, because I’m stuck reading the required elements.

Using the code below works fine for any single word elements, such as color, but fails for any hyphenated ones, such as background-color, which return undefined. I’ve tested this against a number of other elements for consistency.

Any ideas as to why this fails, preferably with suggestions for fixing it? Alternatively, do you have a code snippet that does work for this purpose?

function Save(form) {
var cssRules;
var Q = "";

for (var S = 0; S < document.styleSheets.length; S++){
    if (document.styleSheets[S]['rules']) {
        cssRules = 'rules';
    } else if (document.styleSheets[S]['cssRules']) {
        cssRules = 'cssRules';
    }

    for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
        if (document.styleSheets[S][cssRules][R].selectorText == '.event') {
            Q += "+bc=" + document.styleSheets[S][cssRules][R].style['color'] + "+bb=" + document.styleSheets[S][cssRules][R].style['background-color'];
        }
        // Similar code for other elements goes here
    }
}

form.css.value = Q;
form.submit();
}

Example section of the CSS style sheet:

.event {
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    text-decoration: line-through;
    color: red;
    background-color: #ffff99;
    height:20px;
    width:20px;
}

This is the kind of HTML element I need the style sheet values for:

<td class="event">11</td>

Answer 1

That’s because in Javascript as in other languages the hyphen is not a valid symbol character. When you use strings as indexes, like

style["background-color"]

is the same as doing

style.background-color 

which is not valid, to access hyphened css properties you need to remove the hyphen and uppercase the next character, like

style.backgroundColor; // or style["backgroundColor"];