Довольно удобно получить размер видимых элементов от JS. Вы можете использовать этот метод напрямую:
Кода -копия выглядит следующим образом:
Функция getDefaultstyle (obj, attribute) {// Возвращает функцию окончательного стиля, совместимую с IE и DOM, устанавливает параметры: объект элемента, характеристики стиля
return obj.currentStyle? obj.currentStyle [attribute]: document.defaultView.getComputEdstyle (obj, false) [attribute];
}
Но если этот элемент скрыт (дисплей: нет), а его размер неизвестен, тогда приведенный выше метод не будет работать! Потому что дисплей: ни один элемент не имеет физического размера! Трагедия произошла так!
К счастью, есть также видимость: скрыта в CSS, что невидимо. Самая большая разница между ним и дисплеем: ни одна из них является той видимостью: Hidden имеет физический размер. Если у вас есть физические размеры, вы можете получить размер по вышеуказанному методу, но после изменения дисплея: нет на видимость: скрыто, на странице будет пустое место. Даже если вы измените видимость: скрыто для отображения: нет сразу после того, как вы получите размер, часть страницы все равно будет дрожать. Тогда лучший способ - вывести этот скрытый элемент из экрана или из потока документов (положение: абсолютное). Это кажется идеальным, но трагедия снова случается. Если вы хотите снова отобразить этот элемент, элемент невидим, а позиция неверна, потому что это видимость элемента: скрыто; позиция: абсолютно. Таким образом, после получения размера вы должны восстановить стиль обратно. Это установить атрибуты позиции и видимости обратно в оригинальный стиль.
Это основная реализация JS для получения размера скрытых элементов. Если вы заинтересованы, вы можете взглянуть на метод в книге «Опытный в JavaScript».
Я также сделал простую демонстрацию здесь, вы можете проверить исходный код:
Кода -копия выглядит следующим образом:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> JS получает размер скрытого элемента </title>
<стиль типа = "text/css">
</style>
<script type = "text/javascript" src = "http://www.css88.com/tool/css3preview/jquery-1.4.2.min.js"> </script>
</head>
<тело>
<div id = "test_display_block" style = "display: none; граница: 10px solid #cdcdcd; margin-left: 100px"> Это тестовый контейнер, видимый контейнер <br /> Это тестовый контейнер, видимый контейнер Контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер. Тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый тестирующий. Контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер. Тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый тестирующий. контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер, тестовый контейнер,
<div id = "test_display_none" style = "Display: none; граница: 10px solid #cdcdcd"> это тестовый контейнер, это тестовый контейнер, <br /> Это тестовый контейнер, <br /> Это тестовый контейнер, <br /> Это тестовый контейнер, <br /> Это тестовый контейнер, <br /> <br /div> div> div> div> div> < /> div> div>.
<div id = "test_display_click"> Щелкните меня </div>
<script type = "text/javascript">
// судить тип объекта
функция getType (o) {
var _t;
return ((_t = typeof (o)) == "Object"? O == null && "null"
}
// Получить стиль элемента
функция GetStyle (el, stylename) {
Вернуть El.style [Stylename]? el.style [stylename]: el.currentstyle? el.currentStyle [stylename]: window.getComputedStyle (el, null) [stylename];
}
функция getStylenum (el, stylename) {
вернуть Parseint (getStyle (el, stylename) .replace (/px | pt | em/ig, ''));
}
Функция SetStyle (EL, OBJ) {
if (getType (obj) == "Object") {
для (s in obj) {
var cssarrrt = s.split ("-");
для (var i = 1; i <cssarrrt.length; i ++) {
cssarrrt [i] = cssarrrt [i] .replace (cssarrrt [i] .charat (0), cssarrrt [i] .charat (0) .touppercase ());
}
var cssarrtnew = cssarrrt.join ("");
el.style [cssarrtnew] = obj [s];
}
}
еще
if (getType (obj) == "string") {
el.style.csstext = obj;
}
}
функция GetSize (el) {
if (getStyle (el, "display")! = "Нет") {
return {width: el.offsetwidth || getstylenum (el, "ширина"), высота: el.offsetheight || getStylenum (el, "height")};
}
var _addcss = {display: "", position: "Absolute", видимость: 'hidden'};
var _oldcss = {};
для (я в _addcss) {
_oldcss [i] = getStyle (el, i);
}
SetStyle (el, _Addcss);
var _width = el.clientwidth || GetStylenum (El, «ширина»);
var _height = el.clientHeight || GetStylenum (El, «высота»);
для (i in _oldcss) {
SetStyle (el, _oldcss);
}
return {width: _width, высота: _height};
}
var dd = document.getElementbyId ("test_display_block");
предупреждение (getsize (dd). Hheight);
document.getElementById ("test_display_click"). onclick = function () {
dd.style.display = "block";
document.getElementbyId ("test_display_none"). style.display = "block";
}
Alert ($ ("#test_display_none"). Height ());
</script>
</body>
</html>
Вне темы: как правило, фреймворк JavaScript и библиотеки инкапсулировали этот метод. Например, JQ, мы можем напрямую использовать методы высоты () и ширины (), чтобы получить размер скрытых элементов.