Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как получить ширину и высоту элемента див (https://javascript.ru/forum/dom-window/56488-kak-poluchit-shirinu-i-vysotu-ehlementa-div.html)

sanhai 18.06.2015 14:31

Как получить ширину и высоту элемента див
 
Помогите пожалуйста. Мне нужно узнать width и height элемента <div>. На сколько я понял через свойства е получится нет у <div> такого свойства.? Что делать :( ?
Нужно это для того чтобы определив ширину и высоту див изменить размер картинки тега <img>которая будет в нем. Если картинка по своим размерам меньше элемента див то она отражается со своим размером, если картинка больше чем ширина и высота див, то картинка подгоняется под размер див.

рони 18.06.2015 14:57

sanhai,
-getcomputedstyle

Sigizmund2012 18.06.2015 15:15

Или так:
<div id="wrapper"><img src="#" alt="Image"></div>

<script>
    var div = document.getElementById('wrapper');
    var img = div.querySelector('img');
    if (img.offsetWidth > div.offsetWidth) {
        img.style.width = div.offsetWidth + 'px';
    }
    if (img.offsetHeight > div.offsetHeight) {
        img.style.height = div.offsetHeight + 'px';
    }
</script>

В getComputedStyle() ширина или высота могут иметь значение "auto", а не пиксели.

рони 18.06.2015 15:23

sanhai,
может css без js хватит?
div img{
    max-width: 100%;
    max-height: 100%;
 }

sanhai 18.06.2015 15:49

Спасибо за ответы. Нет css не пойдет если только фаил css (например style_sait_stranica.css) можно было бы как то с помощью php или яваскрипт поменять, например #immm {
width: 100%;
height: 100%;
}
Как ни будь?
Если кого не затруднит вы бы мне в теории описали а скрипт я сам попробую написать. Практика

рони 18.06.2015 16:19

sanhai,
:-?
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
  .m {
    background-color: #FF0000;
  }
  body, html {
 width: 100%;
 height: 100%;
 }
  </style>
</head>

<body>
<div class="m" id="immm"></div>
<script>
  document.styleSheets[0].insertRule("#immm { width: 100%; height: 100%;  }", 0);
</script>
</body>

</html>

sanhai 18.06.2015 16:32

Рони большое спасибо за помощь. У меня фаил css в отдельном фаиле. Так бы мне гораздо удобнее было в этот фали скриптом добраться. Шасс буду чего ни будь думать, спасибо

sanhai 20.06.2015 12:45

Рони большое спасибо, все получилось просто через css
max-width: 100%;

max-height: 100%;
:yes:

serega_dgl 13.11.2018 18:04

Цитата:

Сообщение от Sigizmund20112 (Сообщение 3756227)
Как вариант на javascript можно так сделать
<div id="wrapper"><img src="#" alt="Image"></div>

<script>
    var div = document.getElementById('wrapper');
    var img = div.querySelector('img');
    if (img.offsetWidth > div.offsetWidth) {
        img.style.width = div.offsetWidth + 'px';
    }
    if (img.offsetHeight > div.offsetHeight) {
        img.style.height = div.offsetHeight + 'px';
    }
</script>

В getComputedStyle() ширина или высота могут иметь значение "auto", а не пиксели.

может css без js хватит?
1
div img{
2
max-width: 100%;
3
max-height: 100%;
4
}


Часовой пояс GMT +3, время: 09:46.