Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как получить размер div из style? (https://javascript.ru/forum/dom-window/42943-kak-poluchit-razmer-div-iz-style.html)

Riddik 14.11.2013 19:45

Как получить размер div из style?
 
Вместо ширины в консоль выводится "ничего".

window.onload = function()
{
	var map = document.getElementById("map");
	console.log(map.style.width);
}


Ширину в пикселях можно получить из map.clientWidth, но чисто теоретически, объясните, пожалуйста, почему из стиля нельзя?

ruslan_mart 14.11.2013 20:03

Riddik, наверное, потому что у Вас не задана ширина через стили.

<div onclick="alert(this.style.width)" style="width:200px">Click me</div>
<div onclick="alert(this.style.width)">Click me</div>

Riddik 14.11.2013 20:10

Задана в css файле, это имеет значение?

#map
{
	position: relative;
	display: block;			
	width: 600px;
	height: 773px;		
}


<div id="map"></div>

Не выводит ничего...

alexan0308 14.11.2013 20:55

map.style.width
и пр. работают в JS, только если они были заданы и изменены через JS

Riddik 14.11.2013 21:01

alexan0308,
Учту, спасибо)

BETEPAH 14.11.2013 22:40

<!DOCTYPE HTML>
<html>
  <head>
    
  <style>
    .divo-divnoe {
        width: 100px;
        height: 100px;
        border: 1px solid #666;
        background: #dbdbdb;
      }
      
    </style>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    
  </head>
  <body>
    <div class="divo-divnoe">click me!</div>
    <script>
      $(function() {
        $('.divo-divnoe').on('click', function() {
          alert($(this).width() + ' пикселей в ширину');
          alert($(this).css('width') + ' в ширину');
        });
      });



    </script>

  </body>
</html>

BETEPAH 14.11.2013 23:41

Цитата:

Сообщение от alexan0308
map.style.width
и пр. работают в JS, только если они были заданы и изменены через JS

Это не совсем так ;)
<div id="divo-divnoe" style="width: 100px; height: 100px; border: 1px solid #666; background: #dbdbdb;">click me!</div>
    <script>
      document.getElementById('divo-divnoe').onclick = function(){
        alert(this.style.width + ' в ширину');
      }
    </script>

Правильнее было бы сказать, что .style.width берет стили, которые заданы в инлайне. А jQuery умеет добираться до таблицы.

Riddik 15.11.2013 01:44

BETEPAH,
Спасибо!

На "голом" javascript тоже можно, ведь jQuery просто удобная обёртка.

ruslan_mart 15.11.2013 05:22

<!DOCTYPE HTML>
<html>
  
  <head>
    <style>
      #map {
        width: 200px;
      }
    </style>
  </head>
  
  <body>
    <div id="map">Map</div>
    <script>
      window.onload = function () {
        var map = getComputedStyle(document.getElementById('map'), '');
        alert(map.width);
      }
    </script>
  </body>

</html>

danik.js 15.11.2013 10:00

Цитата:

Сообщение от BETEPAH
А jQuery умеет добираться до таблицы

Не умеет. Потому что это очень проблемно, затратно (проход по всем таблицам стилей, тест всех селекторов на соответствие элементу, взвешивание и прочее) и не требуется, так как есть getComputedStyle, как показал Ruslan_xDD.


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