atributos - obtener id de un elemento javascript
¿Cómo recupero el ancho y alto real de un elemento HTML? (12)
... parece ayuda de CSS para poner div en el centro ...
<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>
Supongamos que tengo un <div> que deseo centrar en la pantalla del navegador (ventana gráfica). Para hacerlo, necesito calcular el ancho y la altura del elemento <div> .
¿Qué debo usar? Por favor incluya información sobre la compatibilidad del navegador.
Aquí está el código para WKWebView que determina la altura de un elemento Dom específico (no funciona correctamente para toda la página)
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 {
}
}
}
Debe utilizar las propiedades .offsetWidth y .offsetHeight . Tenga en cuenta que pertenecen al elemento, no .style .
var width = document.getElementById(''foo'').offsetWidth;
Echa un vistazo a Element.getBoundingClientRect() .
Este método devolverá un objeto que contiene el width , la height y algunos otros valores útiles:
{
width: 960,
height: 71,
top: 603,
bottom: 674,
left: 360,
right: 1320
}
Por ejemplo:
var element = document.getElementById(''foo'');
var positionInfo = element.getBoundingClientRect();
var height = positionInfo.height;
var width = positionInfo.width;
Creo que esto no tiene los problemas que hacen .offsetWidth y .offsetHeight donde a veces devuelven 0 (como se explica en los comentarios aquí )
Otra diferencia es que getBoundingClientRect() puede devolver píxeles fraccionarios, donde .offsetWidth y .offsetHeight se redondearán al entero más cercano.
Nota de IE8 : getBoundingClientRect no devuelve altura y anchura en IE8 y por debajo. *
Si debe ser compatible con IE8, use .offsetWidth y .offsetHeight :
var height = element.offsetHeight;
var width = element.offsetWidth;
Vale la pena señalar que el Objeto devuelto por este método no es realmente un objeto normal . Sus propiedades no son enumerable (por lo que, por ejemplo, Object.keys no funciona de forma Object.keys ).
Más información sobre esto aquí: Cómo convertir mejor un objeto ClientRect / DomRect en un objeto simple
Referencia:
-
.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(): Element.getBoundingClientRect()
En caso de que sea útil para cualquiera, puse un cuadro de texto, un botón y div con el mismo 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>
Lo probé en chrome, firefox y ie-edge, lo intenté con jquery y without, y lo probé con y sin box-sizing:border-box . Siempre con <!DOCTYPE html>
Los resultados:
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
Es fácil modificar los estilos de los elementos, pero es un poco difícil leer el valor.
JavaScript no puede leer ninguna propiedad de estilo de elemento (elem.style) proveniente de css (interno / externo) a menos que use el método incorporado llamado getComputedStyle en javascript.
getComputedStyle (elemento [, pseudo])
Elemento: El elemento para leer el valor de.
pseudo: un pseudo-elemento si es necesario, por ejemplo: antes. Una cadena vacía o ningún argumento significa el elemento en sí.
El resultado es un objeto con propiedades de estilo, como elem.style, pero ahora con respecto a todas las clases css.
Por ejemplo, aquí el estilo no ve el margen:
<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>
Así que modificó su código javaScript para incluir el estilo GetComputedStyle del elemento que desea obtener: ancho / alto u otro atributo
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);
}
}
Valores calculados y resueltos
Hay dos conceptos en CSS:
Un valor de estilo calculado es el valor después de que se aplican todas las reglas de CSS y la herencia de CSS, como resultado de la cascada de CSS. Puede parecerse a la altura: 1em o tamaño de fuente: 125%.
Un valor de estilo resuelto es el que finalmente se aplica al elemento. Valores como 1em o 125% son relativos. El navegador toma el valor calculado y hace que todas las unidades sean fijas y absolutas, por ejemplo: altura: 20 px o tamaño de fuente: 16 px. Para las propiedades de geometría, los valores resueltos pueden tener un punto flotante, como el ancho: 50.5 px.
Hace mucho tiempo se creó getComputedStyle para obtener valores computados, pero resultó que los valores resueltos son mucho más convenientes, y el estándar cambió.
Por eso, en la actualidad, getComputedStyle devuelve el valor resuelto de la propiedad.
Tenga en cuenta:
getComputedStyle requiere el nombre completo de la propiedad
Siempre debe solicitar la propiedad exacta que desea, como rellenoLeft o altura o anchura. De lo contrario no se garantiza el resultado correcto.
Por ejemplo, si hay propiedades paddingLeft / paddingTop, entonces, ¿qué debemos obtener para getComputedStyle (elem) .padding? ¿Nada, o tal vez un valor "generado" de rellenos conocidos? No hay una regla estándar aquí.
Hay otras inconsistencias. A modo de ejemplo, algunos navegadores (Chrome) muestran 10 px en el documento a continuación, y algunos de ellos (Firefox): no:
<style>
body {
margin: 30px;
height: 900px;
}
</style>
<script>
let style = getComputedStyle(document.body);
alert(style.margin); // empty string in Firefox
</script>
para más información https://javascript.info/styles-and-classes
Según MDN: Determinación de las dimensiones de los elementos.
offsetWidth y offsetHeight devuelven la "cantidad total de espacio que ocupa un elemento, incluido el ancho del contenido visible, las barras de desplazamiento (si corresponde), el relleno y el borde"
clientWidth y clientHeight devuelven "cuánto espacio ocupa el contenido real visualizado, incluido el relleno, pero sin incluir el borde, los márgenes ni las barras de desplazamiento"
scrollWidth y scrollHeight devuelven el "tamaño real del contenido, independientemente de cuánto esté visible actualmente"
Por lo tanto, depende de si se espera que el contenido medido esté fuera del área visible actual.
Si offsetWidth devuelve 0, puede obtener la propiedad de ancho de estilo del elemento y buscarlo por un número. "100px" -> 100
//d*/.exec(MyElement.style.width)
Solo necesita calcularlo para IE7 y versiones anteriores (y solo si su contenido no tiene un tamaño fijo). Sugiero usar comentarios condicionales de HTML para limitar la piratería a los antiguos IE que no son compatibles con CSS2. Para todos los demás navegadores usa esto:
<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>
Esta es la solución perfecta. Se centra en <div> de cualquier tamaño y se ajusta al tamaño de su contenido.
También puedes usar este código:
var divID = document.getElementById("divid");
var h = divID.style.pixelHeight;
element.offsetWidth y element.offsetHeight deberían hacer, como se sugirió en la publicación anterior.
Sin embargo, si solo desea centrar el contenido, hay una mejor manera de hacerlo. Suponiendo que utilice xtyml estricto DOCTYPE. establezca el margen: 0, propiedad automática y ancho requerido en px a la etiqueta del cuerpo. El contenido se alinea en el centro de la página.
NOTA : esta respuesta se escribió en 2008. En ese momento, la mejor solución para múltiples navegadores para la mayoría de las personas era usar jQuery. Dejo la respuesta aquí para la posteridad y, si estás usando jQuery, esta es una buena manera de hacerlo. Si está utilizando algún otro marco o JavaScript puro, la respuesta aceptada es probablemente el camino a seguir.
A partir de jQuery 1.2.6 puede usar una de las funciones principales de CSS , height y width (o outerHeight y outerWidth , según corresponda).
var height = $("#myDiv").height();
var width = $("#myDiv").width();
var docHeight = $(document).height();
var docWidth = $(document).width();