Question

看一下这个不起作用的示例代码：

<?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：奇怪的是新值被写入节点，但它们以粗体显示，并且旧的价值观仍然存在。 WTF？

我想我在这里缺少一些基本的东西。

Answer 1

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

Answer 2

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

需要

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

我想;和

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

需要成为

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

并且backgroundColor首先发现大写字母为@David。

Answer 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>

Answer 4

除了其他人所说的内容：删除<?xml version='1.0' encoding='UTF-8' ?>，因为这会将IE置于Quirksmode中。

Javascript不会更改文档？

4 个答案: