Предположим, что у меня есть элемент <div>
, который я хочу отцентрировать в окне просмотра (viewport) браузера. Для этого мне нужно вычислить ширину и высоту элемента <div>
.
Что мне следует использовать? Пожалуйста, включите информацию о совместимости с браузерами.
Взгляните на Element.getBoundingClientRect()
.
Этот метод возвращает объект, содержащий ширина
, высота
, и некоторые другие полезные значения:
{
width: 960,
height: 71,
top: 603,
bottom: 674,
left: 360,
right: 1320
}
Например:
var element = document.getElementById('foo');
var positionInfo = element.getBoundingClientRect();
var height = positionInfo.height;
var width = positionInfo.width;
Я считаю, что это не вопросы это.offsetWidthи
.offsetHeight делать, где они иногда возвращать 0
(как обсуждалось в комментарии)
Другим отличием является getBoundingClientRect () может возвращать дробные пиксели, где.offsetWidth
и .offsetHeight
округляем до ближайшего целого числа.
ИЕ8 внимание: getBoundingClientRect
не возвращает высоту и ширину на ИЕ8 и ниже.*
Если вы должны поддержка IE8, используйте .offsetWidth
и .offsetHeight
:
var height = element.offsetHeight;
var width = element.offsetWidth;
Стоит отметить, что объект, возвращенный этим методом, не совсем нормальным * объекта. Его свойства не [enumerable*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties) (так, например, объект.ключей не'т работать из-коробки.)
Подробнее об этом здесь: https://stackoverflow.com/questions/39417566/how-best-to-convert-a-clientrect-domrect-into-a-plain-object
Ссылка:
.offsetHeight
: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight.offsetWidth
: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth.getBoundingClientRect()
: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRectПРИМЕЧАНИЕ: Этот ответ был написан в 2008 году. В то время лучшим кроссбраузерным решением для большинства людей действительно было использование jQuery. Я оставляю ответ здесь для потомков, и если вы используете jQuery, то это хороший способ сделать это. Если вы используете какой-либо другой фреймворк или чистый JavaScript, то, скорее всего, лучше использовать принятый ответ.
Начиная с jQuery 1.2.6 вы можете использовать одну из основных CSS-функций, height
и width
(или outerHeight
и outerWidth
, в зависимости от ситуации).
var height = $("#myDiv").height();
var width = $("#myDiv").width();
var docHeight = $(document).height();
var docWidth = $(document).width();
На всякий случай это полезно для всех, я поставил текстовое поле, кнопка и div все с той же фрагмента:
width:200px;
height:20px;
border:solid 1px #000;
padding:2px;
<input id="t" type="text" />
<input id="b" type="button" />
<div id="d"></div>
Я пробовал в Chrome, Firefox и IE-край, я пытался с jQuery и без, и я пробовал С и без коробка-размеров:граница-бокс
. Всегда с <!Элемент DOCTYPE в HTML>
Результаты:
Firefox Chrome IE-Edge
with w/o with w/o with w/o box-sizing
$("#t").width() 194 200 194 200 194 200
$("#b").width() 194 194 194 194 194 194
$("#d").width() 194 200 194 200 194 200
$("#t").outerWidth() 200 206 200 206 200 206
$("#b").outerWidth() 200 200 200 200 200 200
$("#d").outerWidth() 200 206 200 206 200 206
$("#t").innerWidth() 198 204 198 204 198 204
$("#b").innerWidth() 198 198 198 198 198 198
$("#d").innerWidth() 198 204 198 204 198 204
$("#t").css('width') 200px 200px 200px 200px 200px 200px
$("#b").css('width') 200px 200px 200px 200px 200px 200px
$("#d").css('width') 200px 200px 200px 200px 200px 200px
$("#t").css('border-left-width') 1px 1px 1px 1px 1px 1px
$("#b").css('border-left-width') 1px 1px 1px 1px 1px 1px
$("#d").css('border-left-width') 1px 1px 1px 1px 1px 1px
$("#t").css('padding-left') 2px 2px 2px 2px 2px 2px
$("#b").css('padding-left') 2px 2px 2px 2px 2px 2px
$("#d").css('padding-left') 2px 2px 2px 2px 2px 2px
document.getElementById("t").getBoundingClientRect().width 200 206 200 206 200 206
document.getElementById("b").getBoundingClientRect().width 200 200 200 200 200 200
document.getElementById("d").getBoundingClientRect().width 200 206 200 206 200 206
document.getElementById("t").offsetWidth 200 206 200 206 200 206
document.getElementById("b").offsetWidth 200 200 200 200 200 200
document.getElementById("d").offsetWidth 200 206 200 206 200 206
По данным МДН: Определение размеров elements
`offsetWidth и offsetHeight возвращения в "общий объем пространства элемент занимает, включая ширину видимого содержимого, полосы прокрутки (если таковые имеются), отступы и границы"и
значения свойств clientwidth и clientHeight
возвращение "как много места фактического отображается контент занимает, в том числе и обивка, но не включая границы, поля или полосы прокрутки и"
scrollWidth и scrollHeight
вернуться в "реальный размер содержимого, независимо от того, сколько его видимый в настоящее время и"
Так это зависит от того, является ли измеренное содержание предполагается из текущей видимой области.
Вам нужно лишь вычислить его для IE7 и старше (и только если ваш контент не't имеют фиксированный размер). Я предлагаю с помощью HTML-кода условные комментарии, чтобы ограничить Hack для старого х годов, что Дон'т поддерживать в CSS2. Для всех остальных браузеров использовать это:
<style type="text/css">
html,body {display:table; height:100%;width:100%;margin:0;padding:0;}
body {display:table-cell; vertical-align:middle;}
div {display:table; margin:0 auto; background:red;}
</style>
<body><div>test<br>test</div></body>
Это является идеальным решением. Это центры в <див>
любого размера, и термоусадочную обертывания это размер его содержания.
Это легко изменить элементы стилей, но немного сложно прочитать значение.
JavaScript может'т Читать любой элемент свойства стиля (Элем.стиль), приходящий из CSS(внутренний/внешний), если вы используете встроенный в вызов метода getComputedStyle в JavaScript.
getComputedStyle(элемент [псевдо])
Элемент: элемент для считывания значения.<БР> псевдо: псевдо-элемента, если требуется, например: С:до. Пустая строка или нет аргументов значит сам элемент.
Результатом является объект со свойствами стиля, как Элем.стиле, но сейчас в отношении всех классов CSS.
Например, стиль здесь не видит разницы:
<head>
<style> body { color: red; margin: 5px } </style>
</head>
<body>
<script>
let computedStyle = getComputedStyle(document.body);
// now we can read the margin and the color from it
alert( computedStyle.marginTop ); // 5px
alert( computedStyle.color ); // rgb(255, 0, 0)
</script>
</body>
Так, изменен код JavaScript, чтобы включить getComputedStyle элемента вы хотите, чтобы получить его's; ширина/высота или другой атрибут
window.onload = function() {
var test = document.getElementById("test");
test.addEventListener("click", select);
function select(e) {
var elementID = e.target.id;
var element = document.getElementById(elementID);
let computedStyle = getComputedStyle(element);
var width = computedStyle.width;
console.log(element);
console.log(width);
}
}
В расчете и разрешенные значения
Есть два понятия в CSS:
вычисленное значение стиль имеет значение после всех правил CSS и CSS наследование применяется, как результат каскада CSS. Это может выглядеть как высота:1эм или шрифт-размер:125%.
разрешенное значение, стиль, наконец, применить к элементу. такие ценности, как 1эм или 125% являются относительными. Браузер принимает вычисленные значение и делает все блоки фиксированной и абсолютный, например: высота:20 пикселей или размер шрифта:16px и. Для свойства геометрии разрешенные значения и GT; может есть с плавающей точкой, такие как ширина:50.5 Военторга.
Давным-давно getComputedStyle был создан, чтобы получить вычисленные значения, но оказалось, что разрешенные значения являются гораздо более удобным, и стандарт изменен.<БР> Поэтому в настоящее время getComputedStyle фактически возвращает разрешенное значение свойства.
Пожалуйста, Обратите Внимание:
getComputedStyle требует полное имя собственность
вы всегда должны задать точное свойство, которое вы хотите, как paddingLeft или высота или ширина. В противном случае правильный результат не гарантирован.
например, если есть свойства paddingLeft/в paddingtop, затем что мы должны сделать для getComputedStyle(Элем).обивка? Ничего, или может быть “сгенерирован” стоимостью от известной прокладки? Нет стандарта правило здесь.
Есть и другие нестыковки. В качестве примера, некоторые браузеры (хром) показать значение 10px в указанном ниже документе, и некоторые из них (в Firefox) – не:
<style>
body {
margin: 30px;
height: 900px;
}
</style>
<script>
let style = getComputedStyle(document.body);
alert(style.margin); // empty string in Firefox
</script>
для получения дополнительной информации https://javascript.info/styles-and-classes
... кажется, Усс помочь поставить div в центр ...
<style>
.monitor {
position:fixed;/* ... absolute possible if on :root */
top:0;bottom:0;right:0;left:0;
visibility:hidden;
}
.wrapper {
width:200px;/* this is size range */
height:100px;
position:absolute;
left:50%;top:50%;
visibility:hidden;
}
.content {
position:absolute;
width: 100%;height:100%;
left:-50%;top:-50%;
visibility:visible;
}
</style>
<div class="monitor">
<div class="wrapper">
<div class="content">
... so you hav div 200px*100px on center ...
</div>
</div>
</div>
element.offsetWidth и element.offsetHeight, как было предложено в предыдущем сообщении.
Однако, если вы хотите просто отцентрировать содержимое, есть лучший способ сделать это. Предположим, вы используете строгий DOCTYPE xhtml. Установите свойство margin:0,auto и требуемую ширину в px для тега body. Содержимое будет выровнено по центру страницы.
также вы можете использовать этот код:
var divID = document.getElementById("divid");
var h = divID.style.pixelHeight;
Вот код для WKWebView то, что определяет высоту конкретного элемента DOM (не't работа должным образом на всю страницу)
let html = "<body><span id=\"spanEl\" style=\"font-family: '\(taskFont.fontName)'; font-size: \(taskFont.pointSize - 4.0)pt; color: rgb(\(red), \(blue), \(green))\">\(textValue)</span></body>"
webView.navigationDelegate = self
webView.loadHTMLString(taskHTML, baseURL: nil)
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
webView.evaluateJavaScript("document.getElementById(\"spanEl\").getBoundingClientRect().height;") { [weak self] (response, error) in
if let nValue = response as? NSNumber {
}
}
}