1
html/javascript의 이상한 동작을 발견했습니다. 내가Html Doctype 태그가 자바 스크립트에 영향을 줍니까?
<!DOCTYPE html>
또는
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
태그를 추가 할 때
나는 그것이 작동하지 않는이 자바 스크립트 코드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;
};
있습니다. 그렇지 않으면 예상대로 작동합니다.
나는 이것을 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>
어떤 브라우저입니까? Internet Explorer **는 사용중인 에뮬레이션/문서 모드 (DOCTYPE에 의해 구동 될 수 있음)에 따라 렌더링과 JavaScript 동작을 변경합니다 **. 그러나, 나는 다른 브라우저가 이것을한다고 생각하지 않는다. – user113215
@ user113215 크롬과 파이어 폭스로 확인했습니다. 둘 다 똑같은 결과를냅니다. IE에서 아직 확인하지 않았습니다. – shan