Форум

Riddik · #1 (**permalink**) 14.11.2013, 19:45

Вместо ширины в консоль выводится "ничего".

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

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

ruslan_mart · #2 (**permalink**) 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 · #3 (**permalink**) 14.11.2013, 20:10

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

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

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

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

alexan0308 · #4 (**permalink**) 14.11.2013, 20:55

map.style.width

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

Riddik · #5 (**permalink**) 14.11.2013, 21:01

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

BETEPAH · #6 (**permalink**) 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 · #7 (**permalink**) 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 · #8 (**permalink**) 15.11.2013, 01:44

BETEPAH,
Спасибо!

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

ruslan_mart · #9 (**permalink**) 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 · #10 (**permalink**) 15.11.2013, 10:00

Сообщение от BETEPAH

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

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

Форум

Справочник

Discord чат

Курсы javascript