Să presupunem că am o <div>
pe care doresc să-și centrul în browser-ul's de afișare (viewport). Pentru a face acest lucru, am nevoie pentru a calcula lățimea și înălțimea de `
Ce ar trebui să folosesc? Vă rugăm să includeți informații privind compatibilitatea browser-ul.
Să ia o privire la Element.getBoundingClientRect()
.
Aceasta metoda va returna un obiect care conține "lățime", "înălțime", și unele alte valori utile:
{
width: 960,
height: 71,
top: 603,
bottom: 674,
left: 360,
right: 1320
}
De Exemplu:
var element = document.getElementById('foo');
var positionInfo = element.getBoundingClientRect();
var height = positionInfo.height;
var width = positionInfo.width;
Cred că acest lucru nu are probleme de asta.offsetWidth "și".offsetHeight face în cazul în care vor reveni, uneori 0
(cum s-a discutat în comentarii aici)
O altă diferență este getBoundingClientRect()
poate reveni fracționată pixeli, unde .offsetWidth "și".offsetHeight
va rotunji la cel mai apropiat număr întreg.
IE8 Rețineți: getBoundingClientRect
nu se întoarce înălțimea și lățimea pe IE8 și de mai jos.*
Dacă trebuie suport IE8, folosi .offsetWidth "și".offsetHeight
:
var height = element.offsetHeight;
var width = element.offsetWidth;
Sale de remarcat faptul că Obiectul returnat de această metodă nu este într-adevăr o normal obiect. Proprietatile sale nu sunt enumerable (așa, de exemplu, Obiect.tastele
nu't de lucru out-of-the-box.)
Mai multe informatii despre asta aici: https://stackoverflow.com/questions/39417566/how-best-to-convert-a-clientrect-domrect-into-a-plain-object
Referință:
.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/getBoundingClientRectNOTĂ: acest răspuns a fost scris în 2008. La moment cea mai bună soluție cross-browser pentru cei mai mulți oameni într-adevăr a fost de a folosi jQuery. Am'm a părăsi raspunsul aici pentru posteritate și, dacă're folosind jQuery, aceasta este o modalitate buna de a face asta. Daca're folosind un alt cadru sau pur JavaScript acceptat răspunsul este, probabil, modul de a merge.
Ca de jQuery 1.2.6 puteți folosi una de bază CSS funcții, "înălțime" și "lățime" (sau outerHeight " și " outerWidth
, după caz).
var height = $("#myDiv").height();
var width = $("#myDiv").width();
var docHeight = $(document).height();
var docWidth = $(document).width();
În cazul în care este util pentru oricine, mi-am pus o caseta de text, buton și div toate cu același css:
width:200px;
height:20px;
border:solid 1px #000;
padding:2px;
<input id="t" type="text" />
<input id="b" type="button" />
<div id="d"></div>
Am încercat din chrome, firefox și ie-c, am incercat cu jquery și fără, și am încercat-o cu și fără box-dimensionare:border-box. Mereu cu
<!DOCTYPE html>`
Rezultatele:
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
Potrivit MDN: Determinarea dimensiunilor elements
`offsetWidth " și " offsetHeight revenirea lui "cantitatea totală de spațiu de un element ocupă, inclusiv lățimea vizibilă a conținutului, barele de derulare (dacă este cazul), umplutură, și de frontieră"
`clientWidth " și " clientHeight revenirea lui "cât de mult spațiu real conținutul afișat nevoie, inclusiv umplutură, dar nu, inclusiv la frontieră, marjele, sau barele de derulare"
`scrollWidth " și " scrollHeight revenirea lui "dimensiunea reală a conținutului, indiferent de cât de mult este vizibil în prezent"
Așa că depinde de conținutul măsurat este de așteptat să fie din zona vizibilă curent.
Ai nevoie doar de a calcula pentru IE7 și mai în vârstă (și numai în cazul în care conținutul nu't au dimensiune fixă). Am sugerăm să utilizați HTML comentarii conditionale pentru a limita hack vechi E că don't suport CSS2. Pentru toate celelalte browsere folosesc asta:
<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>
Aceasta este soluția perfectă. Centrele de `
Este ușor de a modifica elemente de stiluri, dar cam complicat pentru a citi valoarea.
JavaScript poate't citi orice element de stil de proprietate (elem.stil) vine de la css(interne/externe), dacă nu utilizați construit în apel de metodă getComputedStyle în javascript.
getComputedStyle(element [pseudo])
Element: elementul pentru a citi valoarea.
pseudo: Un pseudo-element, dacă este necesar, de exemplu ::înainte. Un șir gol sau nici un argument înseamnă elementul în sine.
Rezultatul este un obiect cu proprietățile de stil, ca elem.stil, dar acum, cu privire la toate clasele css.
De exemplu, aici stilul nu se vedea marja:
<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>
Astfel modificat codul javaScript pentru a include getComputedStyle de elementul pe care doriți să-l's lățime/înălțime sau alt atribut
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);
}
}
Calculat și valorile rezolvate
Există două concepte în CSS:
O tomografie stil este valoarea după toate reguli CSS si CSS moștenirea este aplicat, ca urmare a CSS cascadă. Se poate arata ca height:1em sau font-size:125%.
Un rezolvate stil de valoare este una aplicate în sfârșit element. Valori ca 1em sau 125% sunt relative. Browser-ul ia calculat valoare și de a face toate unitățile fixe și absolută, de exemplu: height:20px sau font-size:16px. Pentru geometrie proprietăți valorile rezolvate poate fi un punct plutitoare, cum ar fi lățimea:50.5 px.
O lungă perioadă de timp în urmă getComputedStyle a fost creat pentru a obține valorile calculate, dar s-a dovedit că valorile rezolvate sunt mult mai convenabil, și standard s-a schimbat.
Deci, în zilele noastre getComputedStyle de fapt, se întoarce rezolvate valoarea proprietății.
Vă Rugăm Să Rețineți:
getComputedStyle completă necesită nume de proprietate
Tu ar trebui să solicite întotdeauna exact proprietatea pe care doriți, cum ar fi paddingLeft sau înălțime sau lățime. În caz contrar corect rezultatul nu este garantat.
De exemplu, dacă există proprietăți paddingLeft/paddingTop, apoi ce ar trebui să avem pentru getComputedStyle(elem).padding? Nimic, sau poate un "generate" valoarea de cunoscut garniture? Nu exista nici un standard regula aici.
Există și alte neconcordanțe. Ca un exemplu, unele browsere (Chrome) arată 10px în documentul de mai jos, iar unele dintre ele (Firefox) – nu:
<style>
body {
margin: 30px;
height: 900px;
}
</style>
<script>
let style = getComputedStyle(document.body);
alert(style.margin); // empty string in Firefox
</script>
pentru mai multe informații https://javascript.info/styles-and-classes
... se pare CSS ajuta pentru a pune div pe centru ...
<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 și element.offsetHeight ar trebui să facă, după cum a sugerat in postul anterior.
Cu toate acestea, dacă doriți doar pentru a centra conținutul, există o cale mai bună de a face acest lucru. Presupunând că utilizați DOCTYPE xhtml strict. set margin:0 auto de proprietate și de lățimea necesară în px tag-ul corpului. Conținutul devine centrul aliniat la pagina.
Aici este codul pentru WKWebView ceea ce determină o înălțime de specifice element Dom (nu't de lucru în mod corespunzător pentru întreaga pagină)
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 {
}
}
}