Why can't a semicolon be inserted through JavaScript in a 'style' attribute?

Question

I was trying to change the background colour of body with JavaScript and observed that the following doesn't work:

document.body.style.background = "#000;"

But if I omit the semicolon then it works:

document.body.style.background = "#000"

Why is it so? Isn't #000; still a string?

Answer 1

; isn't part of the value. It's a style separator .

selector {
    styleName: styleValue;
    /* Separator --------^----- */
}

From the specification :

A rule set (also called "rule") consists of a selector followed by a declaration block.

A declaration block starts with a left curly brace ( { ) and ends with the matching right curly brace ( } ). In between there must be a list of zero or more semicolon-separated ( ; ) declarations.

Your second example (without the ; ) is correct. Your first example fails to set the style because the value #000; is invalid, so the browser ignores it.

Answer 2

Because when you set background style to #000 , it outputs background: #000 . This is not a proper CSS rule.