为什么我不能使用JavaScript在Chrome中直接分配给element.style？

Question

Quick question... for some reason, when I run the following in Chrome (or Safari) on my "li" tags:

myListElement.style.backgroundColor="red";

It works. Yet when I try the following:

myListElement.style="li{background:red;}";

It doesn't. However, it works in Firefox. Does anyone know why this is? I've resorted to using the latter method because when I do the first method it overrides the :hover styling I have assigned to my elements. Otherwise, I'd be using the first method. Any help is appreciated. Thanks guys!

Answer 1

If you check out the style attribute associated with DOM elements, you'll see that, at least in Chrome, it's actually a CSSStyleDeclaration object -- which is why changing it to a string doesn't work. One of its attributes is backgroundColor , and that is a string which you can simply modify. Hope this helps!

Answer 2

怎么样：

myListElement.setAttribute("style", "background:red;");