chrome和css问题答案

【问题标题】：chrome and css issuechrome和css问题
【发布时间】：2011-05-08 21:28:13
【问题描述】：

我有这个 html 代码

<div id = 'status'>
<span class="formw" style="background-color:#FBD9E5;">
some text
</span>
</div>

当下面的 javascript 被执行时

$('status').style.backgroundColor = '#99e83f';

chrome 抛出以下错误：

Uncaught TypeError: Cannot read property 'style' of null

有人知道原因吗？

更新：我正在使用原型。

【问题讨论】：

@user ，我们是否有名为 backgroundcolor fordiv 的属性，它应该是颜色正确或背景图像 url
我相信你错过了ID 的#，请执行：$('#status')，我假设你在这里使用 jQuery。
@gov - 是的，该属性是有效的。 @user - 这可以与 document.getElementById() 一起使用吗？
@steve，你说得对，我忘了。
如果是jQuery，那么.style.foo也是错误的（它会抱怨style为空，而不是$的返回值是。（mutter，mutter，@ 987654331@ 是一个可恶的变量名：blog.dorward.me.uk/2009/02/19/the-dollar-function-must-die.html)。我猜测 $ 直接映射到 document.getElementById 并且 JS 在 div 出现在源代码之前运行代码，但问题缺少太多信息，只是盲目地四处寻找。

标签： javascript css google-chrome prototypejs

【解决方案1】：

您特别提到了谷歌浏览器。 Chrome 的标准比大多数都更严格，尤其是当您的文档有 DOCTYPE 时。

标记<div id = 'status'> 让我怀疑。尽管大多数浏览器都容忍常见的语法错误，但通过将 id 空格与等号分隔开，它可能会被视为布尔属性，相当于 <div id="id">。

您可以打开 javascript 控制台 (Shift+Ctrl+J) 进行测试，然后查看键入的结果：

$('status')
$('id')

如需解决方案，请尝试如下：

<div id="status">

PS。我猜您实际上并不想更改 DIV 的样式，而是更改跨度的样式，以下任何一项都是正确的。

$$('#status .formw').style.backgroundColor = '#99e83f';

$$('#status span').style.backgroundColor = '#99e83f';

$('status').down('.formw').style.backgroundColor = '#99e83f';

$('status').select('span').style.backgroundColor = '#99e83f';

【讨论】：

【解决方案2】：

当您使用经典的 DOM 方法时，有时在原型中的元素会出现一些 DOM 问题。

改为使用原型中定义的方法来读取和设置元素的样式。

你感兴趣的两种方法是：

.setStyle，文档（http://www.prototypejs.org/api/element/setStyle）
.getStyle，文档（http://www.prototypejs.org/api/element/getStyle）

因此，例如，如果您想设置元素的背景，您可以使用：

$('status').setStyle( { 'background-color' : '#99e83f' } );

如果你想读取属性，你会使用：

$('status').getStyle( 'background-color' )

对于 jquery 人群，$( 'element_id' ) 是 document.getElementById( 'element_id' ) 的等效简写。如果你想通过选择器获取元素，那就是 $$( '#element_id' ).first()。

【讨论】：

【解决方案3】：

有两个错误：

$('status').style.backgroundColor = '#99e83f';

第一：

您缺少 # 在选择器中为状态 div 指定 id。

第二：

style 属性不适用于 $('#status') 的 jQuery 对象。

解决方案：

方法一：

$('#status')[0].style.backgroundColor = '#99e83f';

上面添加的[0]将jQuery对象转换为普通的DOM元素，从而成功应用style属性。

方法二：

('#status').css('background-color','#99e83f');

【讨论】：

@sarfraz ，我给了你一段时间的解决方案，但不知道他是否尝试过。
@gov：你在我之后编辑了你的答案：stackoverflow.com/posts/4161919/revisions :)
@sarfraz...嗯，我忘了-介于两者之间
@gov：没问题，这就是问题所在:)
“上面添加的 [0] 将 jQuery 对象转换为普通的 DOM 元素”，谢谢，+1。

【解决方案4】：

如果你使用 jquery 试试这个

$('#status').css('background-color','green');

这应该可以工作

【讨论】：

@jakub，在jquery中做的正确方法是.css method(syntax)，上面的大部分答案都没有使用，但是为什么我的答案被标记了。

【解决方案5】：

试试

$('#status').style.backgroundColor = '#99e83f';

【讨论】：

为什么你认为它不是选择器？我不明白。编辑：算了吧，我刚刚发现你对此的评论。