HTML 요소의 실제 너비와 높이를 어떻게 검색합니까?
<div>브라우저의 디스플레이 (뷰포트)에 중앙에 배치 하려는가 있다고 가정합니다 . 이렇게하려면 <div>요소 의 너비와 높이를 계산해야합니다 .
무엇을 사용해야합니까? 브라우저 호환성에 대한 정보를 포함하십시오.
.offsetWidth및 .offsetHeight속성을 사용해야합니다 . 이들은 요소가 아니라 요소에 속합니다 .style.
var width = document.getElementById('foo').offsetWidth;
를보세요 Element.getBoundingClientRect().
이 방법은 포함하는 객체 반환 width, height및 다른 유용한 값 :
{
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가장 가까운 정수로 반올림됩니다.
IE8 참고 : IE8 이하에서는 getBoundingClientRect높이와 너비를 반환하지 않습니다 . *
IE8을 지원 해야하는 경우 .offsetWidth및 .offsetHeight다음을 사용하십시오 .
var height = element.offsetHeight;
var width = element.offsetWidth;
이 메서드에 의해 반환 된 Object가 실제로는 정상적인 객체 가 아니라는 점에 주목할 가치가 있습니다. 해당 속성은 열거 할 수 없습니다 (예 : 기본적으로Object.keys 작동하지 않음).
여기에 대한 자세한 정보 : ClientRect / DomRect를 일반 개체로 변환하는 가장 좋은 방법
참고:
.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();
누구에게나 유용 할 경우를 대비하여 동일한 CSS로 텍스트 상자, 버튼 및 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>
나는 크롬, 파이어 폭스 및 ie-edge에서 시도해 보았고 jquery를 사용하거나 사용하지 않고 시도했으며 box-sizing:border-box. 항상 함께<!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
MDN 에 따르면 : 요소의 크기 결정
offsetWidth그리고 offsetHeight"보이는 내용의 너비, 스크롤바 (있는 경우), 패딩 및 테두리를 포함하여 요소가 차지하는 총 공간 양"을 반환합니다.
clientWidth그리고 clientHeight"패딩을 포함하여 테두리, 여백 또는 스크롤바는 포함하지 않고 실제 표시된 콘텐츠가 차지하는 공간의 양" 을 반환합니다.
scrollWidth그리고 scrollHeight"그것의 많은 부분이 현재 표시 방법에 관계없이, 내용의 실제 크기의"를 반환
따라서 측정 된 콘텐츠가 현재 볼 수있는 영역을 벗어날 것으로 예상되는지 여부에 따라 다릅니다.
You only need to calculate it for IE7 and older (and only if your content doesn't have fixed size). I suggest using HTML conditional comments to limit hack to old IEs that don't support CSS2. For all other browsers use this:
<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>
This is the perfect solution. It centers <div> of any size, and shrink-wraps it to size of its content.
It is easy to modify the elements styles but kinda tricky to read the value.
JavaScript can't read any element style property (elem.style) coming from css(internal/external) unless you use the built in method call getComputedStyle in javascript.
getComputedStyle(element[, pseudo])
Element: The element to read the value for.
pseudo: A pseudo-element if required, for instance ::before. An empty string or no argument means the element itself.
The result is an object with style properties, like elem.style, but now with respect to all css classes.
For instance, here style doesn’t see the margin:
<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>
So modified your javaScript code to include the getComputedStyle of the element you wish to get it's width/height or other attribute
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);
}
}
Computed and resolved values
There are two concepts in CSS:
A computed style value is the value after all CSS rules and CSS inheritance is applied, as the result of the CSS cascade. It can look like height:1em or font-size:125%.
A resolved style value is the one finally applied to the element. Values like 1em or 125% are relative. The browser takes the computed value and makes all units fixed and absolute, for instance: height:20px or font-size:16px. For geometry properties resolved values may have a floating point, like width:50.5px.
A long time ago getComputedStyle was created to get computed values, but it turned out that resolved values are much more convenient, and the standard changed.
So nowadays getComputedStyle actually returns the resolved value of the property.
Please Note:
getComputedStyle requires the full property name
You should always ask for the exact property that you want, like paddingLeft or height or width. Otherwise the correct result is not guaranteed.
For instance, if there are properties paddingLeft/paddingTop, then what should we get for getComputedStyle(elem).padding? Nothing, or maybe a “generated” value from known paddings? There’s no standard rule here.
There are other inconsistencies. As an example, some browsers (Chrome) show 10px in the document below, and some of them (Firefox) – do not:
<style>
body {
margin: 30px;
height: 900px;
}
</style>
<script>
let style = getComputedStyle(document.body);
alert(style.margin); // empty string in Firefox
</script>
for more information https://javascript.info/styles-and-classes
element.offsetWidth and element.offsetHeight should do, as suggested in previous post.
However, if you just want to center the content, there is a better way of doing so. Assuming you use xhtml strict DOCTYPE. set the margin:0,auto property and required width in px to the body tag. The content gets center aligned to the page.
... seems CSS help to put div on center ...
<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>
also you can use this code:
var divID = document.getElementById("divid");
var h = divID.style.pixelHeight;
if you need to center it in the browser's display port; you can achieve it with CSS only
yourSelector {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Here is the code for WKWebView what determines a height of specific Dom element (doesn't work properly for whole page)
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 {
}
}
}
If offsetWidth returns 0, you can get element's style width property and search it for a number. "100px" -> 100
/\d*/.exec(MyElement.style.width)
'Programing' 카테고리의 다른 글
| 필수 라이브러리 rt.jar에 대한 제한으로 인해 클래스에 대한 액세스 제한이 있습니까? (0) | 2020.09.29 |
|---|---|
| 오류 : java : javacTask : 소스 릴리스 8에는 대상 릴리스 1.8이 필요합니다. (0) | 2020.09.29 |
| 파일 업로드 ASP.NET MVC 3.0 (0) | 2020.09.29 |
| 이전 버전의 패키지 설치 (0) | 2020.09.29 |
| 객체 배열에서 속성 값을 배열로 추출 (0) | 2020.09.29 |