Question

我注意到了html / javascript的奇怪行为。

我有这个javascript代码

window.onload = function(){

var pmap = document.getElementById('pmap'); 

var marker_sl = document.getElementById('marker_sl');
var marker_uk = document.getElementById('marker_uk');

    marker_sl.style.left = pmap.width * 70.5 / 100;
    marker_sl.style.top = pmap.height * 48 / 100;

    marker_uk.style.left = pmap.width * 44 / 100;
    marker_uk.style.top = pmap.height * 14.5 / 100;   
};

添加

时它不起作用

<!DOCTYPE html>

或

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

标记。否则它按预期工作。

我在stackoverflow中找到了这个question。但它似乎没有帮助。

为什么会这样。你能告诉我吗。

好吧，这是我的整个HTML文件

<!DOCTYPE html>
<html>
    <head></head>

<body>
<article>
<img src="images/price_map.jpg" id="pmap" />
<a href="#" id="marker_sl" style="position:absolute;display:block;"><img src="images/marker.png"  /></a>
<a href="#" id="marker_uk" style="position:absolute;display:block;"><img src="images/marker.png"  /></a>
</article>
</body>
<script type="text/javascript">

window.onload = function(){

    var pmap = document.getElementById('pmap'); 

    var marker_sl = document.getElementById('marker_sl');
    var marker_uk = document.getElementById('marker_uk');

        marker_sl.style.left = pmap.width * 70.5 / 100;
        marker_sl.style.top = pmap.height * 48 / 100;

        marker_uk.style.left = pmap.width * 44 / 100;
        marker_uk.style.top = pmap.height * 14.5 / 100;   

};
</script>
</html>

解决了代码

<!DOCTYPE html>
<html>
    <head></head>

<body>
<article>
<img src="images/price_map.jpg" id="pmap" />
<a href="#" id="marker_sl" style="position:absolute;display:block;"><img src="images/marker.png"  /></a>
<a href="#" id="marker_uk" style="position:absolute;display:block;"><img src="images/marker.png"  /></a>
</article>
</body>
<script type="text/javascript">

window.onload = function(){

    var pmap = document.getElementById('pmap'); 

    var marker_sl = document.getElementById('marker_sl');
    var marker_uk = document.getElementById('marker_uk');

        marker_sl.style.left = (pmap.width * 70.5 / 100)+"px";
        marker_sl.style.top = (pmap.height * 48 / 100)+"px";

        marker_uk.style.left = (pmap.width * 44 / 100)+"px";;
        marker_uk.style.top = (pmap.height * 14.5 / 100)+"px";   

};
</script>
</html>

Answer 1

文档声明不应对javascript产生任何影响。发布html文件，或者打开firebug并查看使用文档声明运行它的书籍。

Answer 2

left和top CSS属性需要一个单位，例如＆＃34; px＆＃34;。

Html Doctype标签会影响javascript吗？

2 个答案: