Javascript不会更改文档？答案

【问题标题】：Javascript doesn't change document?Javascript不会更改文档？
【发布时间】：2010-05-20 09:05:54
【问题描述】：

看看这个示例代码，它不起作用：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript">
<!--

function moveMe() {
        document.getElementById('moveme').top = 200;
        document.getElementById('moveme').style.backgroundcolor = 'green';
        document.getElementById('writeme').innerHtml = 'abc';
        alert('called!');
}


// -->
</script>


<style type="text/css">

.moveable {
    position: absolute;
    top: 30px;
    left: 200px;
    width: 100px;
    height: 100px;
    background-color: yellow;
}

#writeme {
    background-color: red;
    color: white;
}

</style>


</head>

<body>

<div id="moveme" class="moveable" onClick="moveMe()">
<p id="writeme">Hello!</p>
</div> 

</body>

</html>

当我单击文本时会显示警报，但文档中没有任何更改。段落文本没有被覆盖，div没有移动......在FF和IE中测试过，也通过Firebug检查过DOM：奇怪的是新值被写入节点，但它们以粗体显示，并且旧的价值观仍然存在。什么鬼？

我想我在这里遗漏了一些基本的东西。

【问题讨论】：

标签： javascript html

【解决方案1】：

非零长度需要单位，“200”缺少单位
JavaScript 区分大小写：backgroundColor 和 innerHTML
由于您似乎在使用 XHTML，因此您的脚本是 commented out

【讨论】：

谢谢大家，太快了！尽管取消注释脚本似乎无关紧要，但这是一篇好文章。

【解决方案2】：

  document.getElementById('moveme').top = 200;

需要

  document.getElementById('moveme').style.top = "200px";

我认为；和

  document.getElementById('writeme').innerHtml = 'abc';

需要成为

  document.getElementById('writeme').innerHTML = 'abc';

它是backgroundColor，@David 首先发现了一个大写字母 C。

【讨论】：

【解决方案3】：

试试这个：

<script type="text/javascript">

function moveMe() {
        document.getElementById('moveme').style.top = '200px';
        document.getElementById('moveme').style.backgroundColor = 'green';
        document.getElementById('writeme').innerHTML = 'abc';
        alert('called!');
}

window.onload = moveMe;

</script>

【讨论】：

【解决方案4】：

除了其他人所说的：删除<?xml version='1.0' encoding='UTF-8' ?>，因为这会使 IE 进入 Quirksmode。

【讨论】：

仅 IE6，这实际上对损坏的代码有益（在 Quirks 模式下不需要单位）！这个答案真的应该是评论。