Оглавление

.width()

width() — позволяет получить ширину  первого элемента коллекции соответственно. Возвращают значение в виде числа. Для примера выведем ширину  доступной области окна браузера.

var w  = $(window).width(); 
$("#div1").html("Ширина: " + w);

В результате будет выведено, например, следующее.
Ширина: 1024

 

В качестве еще одного примера выведем ширину и высоту элемента с помощью методов width() и height(), а для сравнения выведем также значения соответствующих атрибутов стиля.

var elem = $("#div1");
$("#div1").append("<b>Значения  методов: </b><br>") ;
$("#div1").append("Ширина: " + elem.width() + "<br>");
$("#div1").append("Высота: " + elem.height() + "<br>");
$("#div1").append("<b>Значения атрибутов стиля: </b><br>") ;
$("#div1").append("Ширина: " + elem.css("width") + "<br>");
$("#div1").append("Высота: " + elem.css("height") + "<br>");

 

<div id="div1"
style="width:300px;height:2OOpx;border:dotted;">
</div>


В результате будет выведено следующее:

Значения методов:
Ширина: 300
Высота: 40
Значения атрибутов стиля:
Ширина: 300px
Высота: 100px

 

Как видно из примера, значения атрибутов стиля содержат единицы измерения, тогда как методы возвращают значение в виде числа.

 

width(<3начение>) — позволяет задать ширину  всех элементов коллекции соответственно. Возвращает объект jQuery. Зададим ширину всех тегов <div>, а затем укажем цвет фона.

  $("div").width(50).css("background-color", "#ff0000");  


Значением параметра может быть не только число, но и строка.
  $("#div1").width("500px");  

  $("#div2").width("90%");

Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити