Почему Doctypes препятствуют работе Javascript? - PullRequest
Новая
       20

Почему Doctypes препятствуют работе Javascript?

1 голос
/ 04 марта 2012

С помощью некоторых хороших людей здесь, на stackoverflow, я смог исправить javascript на простой текстовой HTML-странице.Вот окончательный код: 

<html>
<head>
</head>
<body>
  <img id="imageid" onmouseover="bigImg(this)" onmouseout="normalImg(this)" src="images/bracelet-1.jpg" alt="image" width="200" > 
  <script type="text/javascript">
     var img = document.getElementById('imageid');
     var normsizeimg = img.style.width;
     var bigwidth = 600;

     function bigImg(x)
     { x.style.width = bigwidth; }
     function normalImg(x) { x.style.width = normsizeimg; }
  </script>
</body>

</html>

Наведите указатель мыши на изображение, и оно увеличится.Простой.

Однако, если мы добавим ЛЮБОЙ оператор Doctype вверху кода, скрипт перестанет работать.Не имеет значения, является ли это HTML4 Doctype, HTML5 Doctype или одним из разновидностей XHTML Doctype.Может кто-нибудь сказать мне, почему это происходит и что с этим можно сделать?

Это важно, потому что я хочу иметь возможность центрировать страницу без таблицы, используя margin: 0 auto, и это работает, только когдаесть Doctype.

Ответы [ 2 ]

4 голосов
/ 04 марта 2012

Оказывается, в стандартном режиме вы не можете предоставить номера для x.style.width. Вместо этого вы должны указать строку, заканчивающуюся 'px'.

Это работает: 

function bigImg ( x ) {
  x.style.width = bigwidth + 'px';
}

function normalImg ( x ) { 
  x.style.width = normsizeimg + 'px';
}

Демонстрационная версия: http://jsfiddle.net/e3d2P/

Кроме того, это также работает: 

function bigImg ( x ) {
  x.width = bigwidth;
}

function normalImg ( x ) { 
  x.width = normsizeimg;
}

Демонстрационная версия: http://jsfiddle.net/e3d2P/1/

Однако, как показывает ответ @ Jan, увеличение размера изображений при наведении можно выполнить только с помощью CSS.

1 голос
/ 04 марта 2012

Пожалуйста, не используйте JavaScript для этого, используйте CSS! Это более семантически, более читабельно и работает намного лучше. 

<!doctype html>
<html>
  <head>
    <title>test</title>
    <style type="text/css">
      #imageid { width:200px }
      #imageid:hover { width:600px }
    </style>
  </head>
  <body>
    <img id="imageid" src="images/bracelet-1.jpg" alt="image"> 
  </body>
</html>
...