Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.06.2015, 14:31
Аспирант
Отправить личное сообщение для sanhai Посмотреть профиль Найти все сообщения от sanhai
 
Регистрация: 17.03.2010
Сообщений: 60

Как получить ширину и высоту элемента див
Помогите пожалуйста. Мне нужно узнать width и height элемента <div>. На сколько я понял через свойства е получится нет у <div> такого свойства.? Что делать ?
Нужно это для того чтобы определив ширину и высоту див изменить размер картинки тега <img>которая будет в нем. Если картинка по своим размерам меньше элемента див то она отражается со своим размером, если картинка больше чем ширина и высота див, то картинка подгоняется под размер див.
Ответить с цитированием
  #2 (permalink)  
Старый 18.06.2015, 14:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

sanhai,
-getcomputedstyle
Ответить с цитированием
  #3 (permalink)  
Старый 18.06.2015, 15:15
Аватар для Sigizmund2012
Профессор
Отправить личное сообщение для Sigizmund2012 Посмотреть профиль Найти все сообщения от Sigizmund2012
 
Регистрация: 16.07.2014
Сообщений: 267

Или так:
<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", а не пиксели.
Ответить с цитированием
  #4 (permalink)  
Старый 18.06.2015, 15:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

sanhai,
может css без js хватит?
div img{
    max-width: 100%;
    max-height: 100%;
 }
Ответить с цитированием
  #5 (permalink)  
Старый 18.06.2015, 15:49
Аспирант
Отправить личное сообщение для sanhai Посмотреть профиль Найти все сообщения от sanhai
 
Регистрация: 17.03.2010
Сообщений: 60

Спасибо за ответы. Нет css не пойдет если только фаил css (например style_sait_stranica.css) можно было бы как то с помощью php или яваскрипт поменять, например #immm {
width: 100%;
height: 100%;
}
Как ни будь?
Если кого не затруднит вы бы мне в теории описали а скрипт я сам попробую написать. Практика
Ответить с цитированием
  #6 (permalink)  
Старый 18.06.2015, 16:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #7 (permalink)  
Старый 18.06.2015, 16:32
Аспирант
Отправить личное сообщение для sanhai Посмотреть профиль Найти все сообщения от sanhai
 
Регистрация: 17.03.2010
Сообщений: 60

Рони большое спасибо за помощь. У меня фаил css в отдельном фаиле. Так бы мне гораздо удобнее было в этот фали скриптом добраться. Шасс буду чего ни будь думать, спасибо
Ответить с цитированием
  #8 (permalink)  
Старый 20.06.2015, 12:45
Аспирант
Отправить личное сообщение для sanhai Посмотреть профиль Найти все сообщения от sanhai
 
Регистрация: 17.03.2010
Сообщений: 60

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

max-height: 100%;
Ответить с цитированием
  #9 (permalink)  
Старый 13.11.2018, 18:04
Новичок на форуме
Отправить личное сообщение для serega_dgl Посмотреть профиль Найти все сообщения от serega_dgl
 
Регистрация: 04.11.2018
Сообщений: 4

Сообщение от Sigizmund20112 Посмотреть сообщение
Как вариант на 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
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как узнать размер в пикселях элемента созданного элемента span Faab Общие вопросы Javascript 2 09.11.2013 16:46
Не могу получить ширину объекта(картинки) Cruzer Общие вопросы Javascript 8 28.10.2011 20:18
Как получить свойства центрированного элемента Lockpickup Events/DOM/Window 4 29.09.2011 12:38
Как сделать реакцию на изменение любого элемента формы. Mik Events/DOM/Window 3 28.07.2011 08:52
Как получить размер блока сразу после изменения его содержимого? Cooskon Events/DOM/Window 6 17.09.2010 16:15