1. Obtenga el estilo en línea del elemento
La copia del código es la siguiente:
var obj = document.getElementById ("prueba");
alerta (obj.Height + "/n" + obj.width);
// 200px 200px tipof = string solo muestra el valor en el atributo de estilo
2. Obtenga el estilo calculado
La copia del código es la siguiente:
var obj = document.getElementById ("prueba");
estilo var = nulo;
if (window.getComputedStyle) {
style = window.getComputedStyle (obj, nulo); // no II
} demás {
estilo = obj.CurrentStyle; // ES DECIR
}
alert ("width =" + style.width + "/nheight =" + style.height);
Nota: Si no se establecen el ancho y la altura del elemento, el ancho y la altura predeterminados se devolverán en los navegadores que no son II. Devuelve la cadena automática en IE
3. Obtenga los estilos escritos por <link> y <style> etiquetas
La copia del código es la siguiente:
var obj = document.stylesheets [0]; // [Object StylesheetList] Número de hojas de estilo <ink> var regla = null; // [objeto cssrule]
if (obj.cssrules) {
regla = obj.cssrules [0]; // no II [objeto cssrulelist]
} demás {
regla = obj.rules [0]; // es decir [objeto cssrulelist]
}
alerta (regla.style.width);
CSSRULES (o reglas) solo puede obtener el ancho y la altura de los estilos en línea y de enlace, y no pueden obtener los estilos en línea y calculados.
Resumen: Los tres métodos anteriores para obtener tamaños de elementos solo pueden obtener el tamaño CSS del elemento, pero no pueden obtener el tamaño real del elemento en sí. Por ejemplo, agregue márgenes internos, barras de desplazamiento, bordes, etc.
4. Obtenga el tamaño real del elemento
1. ClientWidth y ClientHeight
Este conjunto de atributos puede obtener el tamaño del área visual del elemento y el tamaño del espacio ocupado por el contenido del elemento y los márgenes internos. Devuelve el tamaño del elemento, pero sin unidad, la unidad predeterminada es PX. Si establece con fuerza la unidad, como 100EM, aún devolverá el tamaño de PX. (Si obtiene CSS, lo obtendrá de acuerdo con el estilo que establece). Para el tamaño real de un elemento, ClientWidth y ClientHeight se entienden de la siguiente manera:
a. Agregar bordes sin cambios;
b. Aumentar los márgenes sin cambios;
do. Aumente la barra de desplazamiento, el valor final es igual al tamaño original menos el tamaño de la barra de desplazamiento;
d. Aumente el margen interno, el valor final es igual al tamaño original más el margen interno;
La copia del código es la siguiente:
<div id = "prueba"> </div>
#prueba{
Color de fondo: verde;
Ancho: 200px;
Altura: 200px;
borde: sólido 5px rojo; / * corresponde a una comprensión, resultado: 200,200 */
margen: 10px; /* Correspondiente a la comprensión B, resultado: 200,200*/
relleno: 20px; /* Correspondiente a la comprensión C, resultado: 240,240*/
desbordamiento: desplazarse; / * Correspondiente a la comprensión D, resultado: 223,223,223 = 200 (tamaño de CSS) + 40 (márgenes de borde en ambos lados) - 17 (ancho de la barra de desplazamiento) */
}
window.onload = function () {
var obj = document.getElementById ("prueba");
alerta (obj.clientwidth + "," + obj.clientHeight);
};
Nota: Si el ancho y la altura de cualquier CSS no están configurados, el navegador no II contará el tamaño calculado de la barra de desplazamiento y el margen, mientras que el navegador IE regresará 0 (IE8 se ha solucionado).
2. Ancho de desplazamiento y desplazamiento
Este conjunto de propiedades puede obtener el tamaño del elemento del contenido de desplazamiento (contenido visible). Devuelve el tamaño del elemento, la unidad predeterminada es PX. Si no se establecen el ancho y la altura de CSS, obtendrá el ancho y la altura calculados. Para el tamaño real del elemento, el ancho de desplazamiento y el desplazamiento se entienden de la siguiente manera:
1. Agregue bordes, diferentes navegadores tienen explicaciones diferentes (lo siguiente es normal en IE8, pero IE6 no funciona correctamente):
a) Los navegadores Firefox y Opera aumentarán el tamaño del borde, 220x220
b) es decir, los navegadores de cromo y safari ignoran el tamaño del borde, 200x200
c) es decir, el navegador solo muestra la altura de su contenido original, 200x18 (IE8 ha modificado este problema)
2. Agregue el margen interno, el valor final será igual al tamaño original más el tamaño del margen interno, 220x220 e IE es 220x38
3. Agregue la barra de desplazamiento, el valor final será igual al tamaño original menos el tamaño de la barra de desplazamiento, 184x184, es decir, es 184x18
4. Agregue datos externos, sin cambios.
5. Aumente el desbordamiento del contenido, Firefox, Chrome e IE obtengan la altura real del contenido, la ópera es más pequeña que la altura obtenida por los primeros tres navegadores, y Safari es mayor que la altura obtenida por los primeros tres navegadores.
3. Offsetwidth y offsetheight
Este conjunto de propiedades puede devolver el tamaño real del elemento, incluidos los bordes, los márgenes internos y las barras de desplazamiento. Devuelve el tamaño del elemento, la unidad predeterminada es PX. Si no se establecen el ancho y la altura de CSS, obtendrá el ancho y la altura calculados. Para el tamaño real del elemento, OffsetWidth y OffSetheight se entienden de la siguiente manera:
1. Agregue el borde, el valor final será igual al tamaño original más el tamaño del borde, que es 220;
2. Agregue el margen interno, el valor final será igual al tamaño original más el tamaño del margen interno, que es 220;
3. Agregar datos externos, sin cambios;
4. Agregue barras de desplazamiento, sin cambios, y no disminuirá;
Para obtener tamaños de elementos, generalmente son elementos de nivel de bloque y es más conveniente establecer los elementos de tamaño CSS. Es particularmente problemático si es un elemento en línea o un elemento que no tiene un conjunto de tamaño, por lo que se recomienda prestar atención al usarlo.
La copia del código es la siguiente:
<div id = "test"> Test Div Element </div>
#prueba{
Color de fondo: verde;
Ancho: 200px;
Altura: 200px;
borde: sólido 10px rojo; /*Resultado: 220,220*/
margen: 10px; /*Resultado: 220,220 (sin cambio)*/
relleno: 10px; /*Resultado: 240,240*/
desbordamiento: desplazarse; /*Resultado: 240,240 (sin cambio)*/
}
window.onload = function () {
var obj = document.getElementById ("prueba");
alerta (obj.offsetwidth + "," + obj.offsetheight);
};
5. Obtenga el tamaño circundante del elemento
1. ClientLeft y ClientTop obtienen el tamaño del borde
Este conjunto de atributos puede obtener el tamaño del elemento establecer el borde izquierdo y el borde superior. Actualmente, solo los grupos izquierdos y superiores están disponibles, y la derecha y la parte inferior no están disponibles. Si el ancho de los cuatro lados es diferente, puede obtenerlo directamente a través del estilo calculado, o usar los tres grupos anteriores para obtener el tamaño del elemento para obtener la resta.
Ancho del borde derecho: obj.offsetwidth-obj.clientwidth-obj.clientleft
Ancho del borde inferior: obj.offsetheight-obj.clientheight-obj.clienttop
La copia del código es la siguiente:
<div id = "test"> Test Div Element </div>
#prueba{
Color de fondo: verde;
Ancho: 200px;
Altura: 200px;
Borderto: sólido 10px rojo; s
Border-Right: Solid 20px #00FF00;
Border-fondo: azul sólido 30px;
Border-izquierda: sólido 40px #808080;
}
window.onload = function () {
var obj = document.getElementById ("prueba");
alerta (obj.clientleft + "," + obj.clienttop); // 40,10
};
2. OffsetLeft y Offsettop
Este conjunto de atributos puede obtener la posición del elemento actual en relación con el elemento principal. Para obtener la posición actual del elemento en relación con el elemento principal, es mejor establecerla en la posición de posición: Absoluto; De lo contrario, diferentes navegadores tendrán diferentes explicaciones.
a. Establezca la posición en absoluto, todos los navegadores devuelven el mismo valor. como:
La copia del código es la siguiente:
<div id = "test"> Test Div Element </div>
#prueba{
Color de fondo: verde;
Ancho: 200px;
Altura: 200px;
Posición: Absoluto;
Izquierda: 30px;
Arriba: 20px;
}
window.onload = function () {
var obj = document.getElementById ("prueba");
alerta (obj.offsetleft + "," + obj.offsettop); // 30, 20
};
b. Agregar el borde y el margen interno no afectarán su posición, pero agregar los datos externos se acumularán.
3. Box.OffsetParent obtiene el elemento principal
En OffSetParent, si el elemento principal es <body>, no EI devuelve un objeto de cuerpo e IE (es decir) devuelve un objeto HTML. Si se anidan dos elementos, si la posición de posicionamiento: Absolute no se usa en el elemento principal, entonces OffsetParent devolverá el objeto del cuerpo o el objeto HTML. Por lo tanto, al obtener OffsetLeft y Offsettop, el posicionamiento de CSS es muy importante.
Si, en muchos niveles, se ha colocado la capa externa, ¿cómo podemos obtener la distancia entre los elementos en la capa interna del cuerpo o los elementos HTML? Es decir, obtenga la ubicación de cualquier elemento de la página. Luego podemos escribir funciones y lograrlas retrocediendo constantemente hacia arriba para obtener la acumulación.
La copia del código es la siguiente:
box.offsettop + box.offsetparent.offsettop; // Cuando solo hay dos capas
función offsetSteft (elemento) {
var izquierda = elemento.OffSetLeft; // Obtener la distancia de la primera capa
var parent = element.OffSetParent; // Obtén el primer elemento principal
while (parent! == null) {// Si hay un elemento principal anterior
izquierda += parent.offsetleft; // Agregar las distancias de esta capa
parent = parent.offsetParent; // Obtener el elemento principal de esta capa
} // luego continúa el bucle
regresar a la izquierda;
}
4. Scrolltop y Scrollleft
Este conjunto de propiedades puede obtener el tamaño de área de la barra de desplazamiento que se está ocultando (el área sobre la barra de desplazamiento), o establecerse para colocarlo en esa área. Si desea desplazar la barra de desplazamiento a su posición inicial, puede escribir una función:
La copia del código es la siguiente:
función scrollstart (elemento) {
if (element.scrolltop! = 0) {
elemento.scrolltop = 0;
}
}
5. GetBoundingClientRect ()
Este método devuelve un objeto rectangular con cuatro propiedades: izquierda, superior, derecha e inferior. Indica la distancia entre cada borde del elemento y el lado superior e izquierdo de la página.
La copia del código es la siguiente:
var box = document.getElementById ('box'); // Obtener elemento
alerta (box.getBoundingClientRect (). Top); // La distancia sobre el elemento es desde la parte superior de la página
alerta (box.getBoundingClientRect (). Right); // La distancia a la derecha del elemento desde la izquierda de la página
alerta (box.getBoundingClientRect (). Bottom); // La distancia debajo del elemento es desde la parte superior de la página
alerta (box.getBoundingClientRect (). Izquierda); // La distancia a la izquierda del elemento desde la izquierda de la página
Nota: IE, Firefox3+, Opera9.5, Chrome y Safari Support. En IE, las coordenadas predeterminadas se calculan a partir de (2, 2), lo que resulta en la distancia final de dos píxeles más que otros navegadores. Necesitamos ser compatibles.
La copia del código es la siguiente:
document.documentelement.clientTop; // no es 0, es decir, es 2
document.documentelement.clientleft; // no es 0, es decir, es 2
functionGgetRect (elemento) {
var rect = element.getBoundingClientRect ();
var top = document.documentelement.clientTop;
var izquierda = document.documentelement.clientleft;
devolver{
arriba: rect.top - top,
Abajo: rect.bottom - arriba,
Izquierda: rect.left - izquierda,
Derecha: Rect.Right - Izquierda
}
}
Agregue bordes externos, márgenes internos, bordes y barras de desplazamiento, respectivamente, para probar si todos los navegadores son consistentes.
Lo anterior es todo el contenido descrito en este artículo. Espero que te pueda gustar.