Html Doctype tag affects javascript?
Question
I've noticed strange behavior of html/javascript.
I have this javascript code
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;
};
it doesn't work when I add
<!DOCTYPE html>
or
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
tags. Otherwise It works as expected.
I have found this question in stackoverflow. But it doesn't seem to help.
Why this happens. Can you please tell me.
Well, Here goes my entire HTML file
<!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>
Solved code
<!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>
2 answers
solution1
1 2014-07-20 04:17:26
The document declaration shouldn't have any effect on the javascript. Post the html file, alternatively open up firebug and see what books you get running it with the document declaration.
solution2
1 ACCPTED 2014-07-20 04:29:07
left和top CSS属性需要一个单位，例如“ px”。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.