1. Получите встроенный стиль элемента
Кода -копия выглядит следующим образом:
var obj = document.getElementById ("test");
Alert (obj.height + "/n" + obj.width);
// 200px 200px typeof = string просто отображает значение в атрибуте стиля
2. Получите рассчитанный стиль
Кода -копия выглядит следующим образом:
var obj = document.getElementById ("test");
var style = null;
if (window.getComputedStyle) {
style = window.getComputedStyle (obj, null); // не-Ий
} еще {
Style = obj.currentStyle; // т.е.
}
Alert ("width =" + style.width + "/nheight =" + style.height);
ПРИМЕЧАНИЕ. Если ширина и высота элемента не установлены, ширина и высота по умолчанию будут возвращены в браузерах, не связанных с ИМ. Вернуть автоподобную строку под т.е.
3. Получите стили, написанные <Link> и <style> теги
Кода -копия выглядит следующим образом:
var obj = document.stylesheests [0]; // [Object StyleSheetList] Количество листов стиля <Link> var rule = null; // [Object cssrule]
if (obj.cssrules) {
Правило = obj.cssrules [0]; // не [объект cssrulelist]
} еще {
Правило = obj.rules [0]; // т.е. [объект cssrulelist]
}
оповещение (rug.style.width);
CSSRULE (или правила) могут получить только ширину и высоту встроенных и ссылок, и не могут получить встроенные и рассчитанные стили.
Резюме: Приведенные выше три метода получения размеров элементов могут получить только размер CSS элемента, но не могут получить фактический размер самого элемента. Например, добавить внутреннюю полю, прокрутки, границы и т. Д.
4. Получите фактический размер элемента
1. Клиентская Whidth и ClientHeight
Этот набор атрибутов может получить размер визуальной области элемента, а также размер пространства, занятого содержанием элемента и внутренней границей. Возвращает размер элемента, но без единицы, блок по умолчанию - PX. Если вы насильственно установите устройство, например, 100EM, он все равно вернет размер PX. (Если вы получите CSS, вы получите его в соответствии со стилем, который вы устанавливаете). Для фактического размера элемента, клиентская -тодата и клиент -вершина понимаются следующим образом:
а Добавить границы без изменений;
беременный Увеличить маржу без изменений;
в Увеличьте полосу прокрутки, конечное значение равно исходному размеру за вычетом размера полосы прокрутки;
дюймовый Увеличьте внутреннюю маржу, конечное значение равно исходному размеру плюс внутренний край;
Кода -копия выглядит следующим образом:
<div id = "test"> </div>
#тест{
фоновый цвет: зеленый;
Ширина: 200px;
Высота: 200px;
Граница: твердый 5px красный; / * соответствует пониманию, результат: 200,200 */
Маржа: 10px; /* Соответствует пониманию B, результат: 200,200*/
Заполнение: 20px; /* Соответствует пониманию C, результат: 240,240*/
переполнение: прокрутка; / * Соответствует пониманию D, результат: 223,223,223 = 200 (размер CSS) + 40 (пограничные маржи с обеих сторон) - 17 (ширина прокрутки) *///
}
window.onload = function () {
var obj = document.getElementById ("test");
Alert (obj.clientWidth + "," + obj.clientHeight);
};
Примечание. Если ширина и высота любых CSS не установлены, браузер не будет подсчитывать расчетный размер полосы прокрутки и поля, в то время как браузер IE вернет 0 (IE8 был исправлен).
2. Прокручивание и прокрутки
Этот набор свойств может получить размер элемента контента прокрутки (видимого контента). Возвращает размер элемента, блок по умолчанию - PX. Если ширина и высота CSS не установлены, он получит рассчитанную ширину и высоту. Для фактического размера элемента, ширина Scroll и Scrollheight понимаются следующим образом:
1. Добавьте границы, разные браузеры имеют разные объяснения (следующее является нормальным в IE8, но IE6 не работает должным образом):
а) Браузеры Firefox и Opera увеличат размер границы, 220x220
б) т.е. браузеры Chrome и Safari игнорируют размер границы, 200x200
C) IE Browser только отображает высоту его исходного контента, 200x18 (IE8 изменил эту проблему)
2. Добавьте внутреннюю маржу, конечное значение будет равным исходному размеру плюс размер внутреннего края, 220x220, а IE - 220x38
3. Добавьте полосу прокрутки, конечное значение будет равным исходному размеру за вычетом размера полоса прокрутки, 184x184, то есть 184x18
4. Добавьте внешние данные, без изменений.
5. Увеличьте переполнение контента, Firefox, Chrome и IE Получите фактическую высоту содержания, опера меньше высоты, полученной первыми тремя браузерами, а сафари больше высоты, полученной первыми тремя браузерами.
3. OffsetWidth и OffSetheight
Этот набор свойств может вернуть фактический размер элемента, включая границы, внутреннюю маржу и полосы прокрутки. Возвращает размер элемента, блок по умолчанию - PX. Если ширина и высота CSS не установлены, он получит рассчитанную ширину и высоту. Для фактического размера элемента, смещенная сила и смещение понимаются следующим образом:
1. Добавьте границу, конечное значение будет равным исходному размеру плюс размер границы, который составляет 220;
2. Добавьте внутреннюю маржу, конечное значение будет равным исходному размеру плюс размер внутреннего края, который составляет 220;
3. Добавить внешние данные, без изменений;
4. Добавьте полосы прокрутки, без изменений и не уменьшатся;
Для получения размеров элементов, как правило, элементы на уровне блока, и удобнее установить элементы размера CSS. Это особенно хлопотно, если это встроенный элемент или элемент, который не имеет установленного размера, поэтому рекомендуется обратить внимание при его использовании.
Кода -копия выглядит следующим образом:
<div id = "test"> test div -элемент </div>
#тест{
фоновый цвет: зеленый;
Ширина: 200px;
Высота: 200px;
Граница: твердый 10px красный; /*Результат: 220,220*/
Маржа: 10px; /*Результат: 220,220 (без изменений)*/
Заполнение: 10px; /*Результат: 240,240*/
переполнение: прокрутка; /*Результат: 240,240 (без изменений)*/
}
window.onload = function () {
var obj = document.getElementById ("test");
Alert (obj.offsetwidth + "," + obj.offsetheight);
};
5. Получите окружающий размер элемента
1. ClientLeft и ClientTop Получают размер границы
Этот набор атрибутов может получить размер элемента установить левую границу и верхнюю границу. В настоящее время доступны только левые и верхние группы, а правая и дно недоступны. Если ширина четырех сторон отличается, вы можете напрямую получить его через рассчитанное стиль или использовать три вышеуказанные группы для получения размера элемента, чтобы получить вычитание.
Ширина правой границы: obj.offsetwidth-obj.clientwidth-obj.clientleft
Ширина нижней границы: obj.offsetheight-obj.clientheight-obj.clienttop
Кода -копия выглядит следующим образом:
<div id = "test"> test div -элемент </div>
#тест{
фоновый цвет: зеленый;
Ширина: 200px;
Высота: 200px;
граница: сплошной 10px красный;
Право границы: сплошной 20px #00ff00;
Пограничный подъем: сплошной 30px синий;
РЕМЖА СЛЕДУ: Твердый 40px #808080;
}
window.onload = function () {
var obj = document.getElementById ("test");
Alert (obj.clientleft + "," + obj.clienttop); // 40,10
};
2. offsetleft и OffsetTop
Этот набор атрибутов может получить положение текущего элемента относительно родительского элемента. Чтобы получить текущую позицию элемента по сравнению с родительским элементом, лучше всего установить его в положение позиции: абсолютно; В противном случае разные браузеры будут иметь разные объяснения.
а Установите положение в абсолютное, все браузеры возвращают одно и то же значение. нравиться:
Кода -копия выглядит следующим образом:
<div id = "test"> test div -элемент </div>
#тест{
фоновый цвет: зеленый;
Ширина: 200px;
Высота: 200px;
позиция: абсолютно;
Слева: 30px;
Верх: 20px;
}
window.onload = function () {
var obj = document.getElementById ("test");
Alert (obj.offsetleft + "," + obj.offsettop); // 30, 20
};
беременный Добавление границы и внутренней маржи не повлияет на его положение, но добавление внешних данных будет накапливаться.
3. box.offsetParent Получает родительский элемент
В OffsetParent, если сам родительный элемент <body>, не возвращает объект тела, а IE (IE6) возвращает HTML-объект. Если вложены два элемента, если положение позиционирования: абсолют не используется на родительском элементе, то OffSetSetParent вернет объект тела или объект HTML. Следовательно, при получении Offsetleft и OffsetTop позиционирование CSS очень важно.
Если во многих уровнях был расположен внешний слой, как мы можем получить расстояние между элементами во внутреннем слое от тела или HTML -элементов? То есть получить местоположение любого элемента со страницы. Затем мы можем написать функции и достичь их, постоянно возвращаясь вверх, чтобы получить накопление.
Кода -копия выглядит следующим образом:
box.offsettop + box.offsetparent.offsettop; // Когда есть только два слоя
функция offsetleft (element) {
var Left = element.OffSetleft; // Получить первое расстояние слоя
var parent = element.offsetParent; // Получить первый родительский элемент
while (parent! == null) {// Если есть предыдущий родительский элемент
слева += parent.offsetleft; // Добавить расстояния этого слоя
parent = parent.offsetParent; // Получить родительский элемент этого слоя
} // затем продолжить петлю
вернуться влево;
}
4. Scrolltop и Scrollleft
Этот набор свойств может получить размер площади спрятанной полосы прокрутки (область над стержней прокрутки) или установить, чтобы позиционировать ее в эту область. Если вы хотите прокрутить полос прокрутки до его начальной позиции, вы можете написать функцию:
Кода -копия выглядит следующим образом:
функция Scrollstart (element) {
if (element.scrolltop! = 0) {
element.scrolltop = 0;
}
}
5. GetBoundingClientRect ()
Этот метод возвращает прямоугольный объект с четырьмя свойствами: слева, вверху, справа и снизу. Это указывает на расстояние между каждым краем элемента и верхней и левой стороны страницы.
Кода -копия выглядит следующим образом:
var box = document.getElementById ('box'); // Получить элемент
Alert (box.getBoundingClientRect (). Top); // расстояние над элементом находится от верхней части страницы
Alert (box.getBoundingClientRect (). // расстояние справа от элемента слева от страницы
Alert (box.getBoundingClientRect (). Внизу); // расстояние под элементом находится от верхней части страницы
Alert (box.getBoundingClientRect (). слева); // расстояние до левого элемента слева от страницы
Примечание: т.е. Firefox3+, Opera9.5, Chrome и Safari. В т.е. координаты по умолчанию рассчитываются из (2, 2), что приводит к окончательному расстоянию на два пикселя больше, чем другие браузеры. Мы должны быть совместимыми.
Кода -копия выглядит следующим образом:
document.documentelement.clienttop; // non ie is 0, то есть 2
document.documentelement.clientleft; // non ie is 0, то есть 2
functionGgetRect (element) {
var rect = element.getBoundingClientRect ();
var top = document.documentelement.clienttop;
var Left = document.documentelement.clientleft;
возвращаться{
Верх: rect.top - top,
внизу: rect.bottom - top,
слева: rect.left - слева,
Право: Прямо. Право - слева
}
}
Добавьте внешние края, внутреннюю маржу, границы и полосы прокрутки соответственно, чтобы проверить, являются ли все браузеры последовательными.
Выше всего, все контент, описанный в этой статье. Надеюсь, вам это понравится.