Последние учебники веб-разработки
 

jQuery - Габаритные размеры

❮ Предыдущая Следующая Глава ❯

С помощью JQuery, легко работать с размерами элементов и окна браузера.

Методы измерения Jquery

JQuery имеет несколько важных методов для работы с размерами:

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

Jquery Размеры

Jquery Размеры

Jquery width() и height() Методы

В width() устанавливает метод или возвращает ширину элемента ( не включает padding, border и margin ).

В height() устанавливает метод или возвращает высоту элемента ( не включает padding, border и margin ).

Следующий пример возвращает ширину и высоту определенного <div> элемент:

пример

$("button").click(function(){
    var txt = "";
    txt += "Width: " + $("#div1").width() + "</br>";
    txt += "Height: " + $("#div1").height();
    $("#div1").html(txt);
});
Попробуй сам "

JQuery innerWidth() и innerHeight() Методы

innerWidth() метод возвращает ширину элемента (включает в себя padding ).

innerHeight() метод возвращает высоту элемента (включает в себя padding ).

Следующий пример возвращает внутреннюю ширину / высоту заданного <div> элемент:

пример

$("button").click(function(){
    var txt = "";
    txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
    txt += "Inner height: " + $("#div1").innerHeight();
    $("#div1").html(txt);
});
Попробуй сам "

JQuery outerWidth() и outerHeight() Методы

outerWidth() метод возвращает ширину элемента (включает в себя padding и border ).

outerHeight() метод возвращает высоту элемента (включает в себя padding и border ).

Следующий пример возвращает внешний ширина / высота заданного <div> элемент:

пример

$("button").click(function(){
    var txt = "";
    txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
    txt += "Outer height: " + $("#div1").outerHeight();
    $("#div1").html(txt);
});
Попробуй сам "

outerWidth(true) метод возвращает ширину элемента (включает в себя padding, border , и margin ).

outerHeight(true) метод возвращает высоту элемента (включает в себя padding, border , и margin ).

пример

$("button").click(function(){
    var txt = "";
    txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
    txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
    $("#div1").html(txt);
});
Попробуй сам "

Jquery Более width() и height()

Следующий пример возвращает ширину и высоту документа (HTML документа) и окна (браузер просмотра):

пример

$("button").click(function(){
    var txt = "";
    txt += "Document width/height: " + $(document).width();
    txt += "x" + $(document).height() + "\n";
    txt += "Window width/height: " + $(window).width();
    txt += "x" + $(window).height();
    alert(txt);
});
Попробуй сам "

Следующий пример устанавливает ширину и высоту определенного <div> элемент:

пример

$("button").click(function(){
    $("#div1").width(500).height(500);
});
Попробуй сам "

Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 »

JQuery CSS Reference

Полный обзор всех методов JQuery CSS, пожалуйста , перейдите на наш / CSS Reference JQuery HTML .


❮ Предыдущая Следующая Глава ❯