Почему моя высота изображения не меняется?

-2

Я изучаю JavaScript и использую следующий код.Почему моя высота изображения не меняется?

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <title>javascript learning</title> 
    <script type="text/javascript"> 
     function resizeRock() { 
      document.getElementById("rockImage").style.height = (document.body.clientHeight - 100) * 0.5; 
     } 

    </script> 
</head> 
<body onload="resizeRock();"> 
    <!--ROCK--> 
    <div id="image"> 
     <img src="http://outdoordesignbylucas.files.wordpress.com/2011/01/1-10-11-triangular-rock.jpg" id="rockImage" onclick="touchRock();" style="cursor: pointer;" /> 
    </div> 



</body> 
</html>

Этот код не изменение размера изображения, однако следующий код работает, как ожидалось:

<html> 
    <head> 
    <title>iRock - The Virtual Pet Rock</title> 

    <script type="text/javascript"> 

     function resizeRock() { 
     document.getElementById("rockImage").style.height = (document.body.clientHeight - 100) * 0.5; 
     } 


    </script> 
    </head> 

    <body onload="resizeRock();"> 
    <div style="margin-top:100px; text-align:center"> 
     <img id="rockImage" src="http://outdoordesignbylucas.files.wordpress.com/2011/01/1-10-11-triangular-rock.jpg" alt="iRock" style="cursor:pointer" onclick="touchRock();" /> 
    </div> 
    </body> 
</html>

Я ломать голову над этим. Код тот же, верхний (не работает) - это то, что я написал - дно из книги. Что мне не хватает?

источник

2013-11-23 user2998953

Вы изменяете размер div. Почему вы ожидаете изменения размера img? – JJJ

@Juhana Он не изменяет размер div. 'document.getElementById (" rockImage "). style.height' изменяет высоту скалы, а не div. –

Это может сработать: измените 'document.getElementById (" rockImage "). Style.height = (document.body.clientHeight - 100) * 0.5;' to' document.getElementById ("rockImage"). Style.height = * (document.body.clientHeight - 100) * 0.5) + 'px'; '. Это даст вашему номеру единицу. –

Вам необходимо придать вашему стилю единицу.

Изменить эту строку:

document.getElementById("rockImage").style.height = (document.body.clientHeight - 100) * 0.5;

Для этого:

document.getElementById("rockImage").style.height = ((document.body.clientHeight - 100) * 0.5) + 'px';

Thiss сообщит браузеру, что вы устанавливаете высоту в рх, а не процентов, пт, эм и т.д.

jsFiddle/Full Screen Result

источник

2013-11-23 15:40:12

Я не знаю, как ваш код отличается от кода книги. Может быть, код книги тоже не работает? –

проблема заключается в том с DOCTYPE

<!DOCTYPE html>

Это помещает ваш документ в стандартный режим. Добавьте этот CSS:

html 
{ 
height: 100% 
} 
body 
{ 
height: 100% 
}

Добавление "px" к концу оператора будет решить эту проблему, так как в стандартном режиме необходимо указать устройство в явном виде. В качестве альтернативы вы можете удалить <!DOCTYPE html>

источник

2013-11-23 16:17:46 Hessam

Почему моя высота изображения не меняется?

ответ

Смежные вопросы