1. Obtenha o estilo inline do elemento
A cópia do código é a seguinte:
var obj = document.getElementById ("teste");
alerta (obj.Height + "/n" + obj.width);
// 200px 200px typeof = string apenas exibe o valor no atributo de estilo
2. Obtenha o estilo calculado
A cópia do código é a seguinte:
var obj = document.getElementById ("teste");
var estilo = nulo;
if (window.getComputedStyle) {
estilo = window.getComputedStyle (obj, nulo); // ONE OUE
} outro {
estilo = obj.currentStyle; // ou seja
}
alert ("width =" + style.width + "/NHeight =" + style.Height);
NOTA: Se a largura e a altura do elemento não estiverem definidas, a largura e a altura padrão serão devolvidas em navegadores que não são da AI. Retorne a sequência automática de IE
3. Obtenha os estilos escritos por <link> e <yoy> tags
A cópia do código é a seguinte:
var obj = document.stylesheets [0]; // [Objeto StylesheetList] Número de folhas de estilo <Link> var regra = null; // [objeto cssRule]
if (obj.cssrules) {
regra = obj.cssrules [0]; // não-IA [objeto cssrulelist]
} outro {
regra = obj.rules [0]; // ou seja [objeto cssrulelist]
}
alerta (regra.style.width);
CSSRULES (ou regras) só podem obter a largura e a altura dos estilos embutidos e de link e não podem obter os estilos embutidos e calculados.
Resumo: Os três métodos acima para obter tamanhos de elemento podem obter apenas o tamanho CSS do elemento, mas não podem obter o tamanho real do próprio elemento. Por exemplo, adicione margens internas, barras de rolagem, bordas, etc.
4. Obtenha o tamanho real do elemento
1. Largura do cliente e peso do cliente
Esse conjunto de atributos pode obter o tamanho da área visual do elemento e o tamanho do espaço ocupado pelo conteúdo do elemento e pelas margens internas. Retorna o tamanho do elemento, mas nenhuma unidade, a unidade padrão é PX. Se você definir com força a unidade, como 100em, ela ainda retornará o tamanho de PX. (Se você obtiver CSS, você o obterá de acordo com o estilo definido). Para o tamanho real de um elemento, a largura do cliente e o peso do cliente são entendidos da seguinte forma:
um. Adicione fronteiras sem alterações;
b. Aumentar as margens sem mudança;
c. Aumente a barra de rolagem, o valor final é igual ao tamanho original menos o tamanho da barra de rolagem;
d. Aumente a margem interna, o valor final é igual ao tamanho original mais a margem interna;
A cópia do código é a seguinte:
<div id = "test"> </div>
#teste{
Background-Color: verde;
Largura: 200px;
Altura: 200px;
borda: sólido 5px vermelho; / * corresponde a um entendimento, resultado: 200.200 */
margem: 10px; /* Correspondente ao entendimento B, resultado: 200.200*/
preenchimento: 20px; /* Correspondente ao entendimento C, resultado: 240.240*/
Overflow: roll; / * Correspondente ao entendimento d, resultado: 223.223.223 = 200 (tamanho do CSS) + 40 (margens de borda de ambos os lados) - 17 (largura da barra de rolagem) */
}
window.onload = function () {
var obj = document.getElementById ("teste");
alerta (obj.clientwidth + "," + obj.clientHeight);
};
NOTA: Se a largura e a altura de qualquer CSS não estiverem definidas, o navegador que não é da AE contará o tamanho calculado da barra de rolagem e a margem, enquanto o navegador do IE retornará 0 (o IE8 foi corrigido).
2. Livência de roll e rolllheight
Esse conjunto de propriedades pode obter o tamanho do elemento do conteúdo de rolagem (conteúdo visível). Retorna o tamanho do elemento, a unidade padrão é PX. Se nenhuma largura e altura do CSS estiverem definidas, ele receberá a largura e a altura calculadas. Para o tamanho real do elemento, Scrollwidth e ScrolHeight são entendidos da seguinte forma:
1. Adicione bordas, diferentes navegadores têm explicações diferentes (o seguinte é normal no IE8, mas o IE6 não funciona corretamente):
a) Os navegadores do Firefox e da Opera aumentarão o tamanho da fronteira, 220x220
b) IE, navegadores de cromo e safári ignoram o tamanho da borda, 200x200
c) O navegador do IE exibe apenas a altura de seu conteúdo original, 200x18 (o IE8 modificou esse problema)
2. Adicione a margem interna, o valor final será igual ao tamanho original mais o tamanho da margem interna, 220x220, e o IE é 220x38
3. Adicione a barra de rolagem, o valor final será igual ao tamanho original menos o tamanho da barra de rolagem, 184x184, ou seja, 184x18
4. Adicione dados externos, sem alterações.
5. Aumente o excesso de conteúdo, o Firefox, o Chrome e o IE recebem a altura real do conteúdo, a ópera é menor que a altura obtida pelos três primeiros navegadores e o Safari é maior que a altura obtida pelos três primeiros navegadores.
3 .Width e offsetheft
Esse conjunto de propriedades pode retornar o tamanho real do elemento, incluindo bordas, margens internas e barras de rolagem. Retorna o tamanho do elemento, a unidade padrão é PX. Se nenhuma largura e altura do CSS estiverem definidas, ele receberá a largura e a altura calculadas. Para o tamanho real do elemento, a largura de deslocamento e o peso do lado são entendidos da seguinte forma:
1. Adicione a borda, o valor final será igual ao tamanho original mais o tamanho da borda, que é 220;
2. Adicione a margem interna, o valor final será igual ao tamanho original mais o tamanho da margem interna, que é 220;
3. Adicione dados externos, sem alterações;
4. Adicione barras de rolagem, sem alterações e não diminuirá;
Para obter tamanhos de elementos, geralmente são elementos no nível do bloco e é mais conveniente definir os elementos de tamanho CSS. É particularmente problemático se for um elemento embutido ou um elemento que não tenha um conjunto de tamanho, por isso é recomendável prestar atenção ao usá -lo.
A cópia do código é a seguinte:
<div id = "test"> teste Div elemento </div>
#teste{
Background-Color: verde;
Largura: 200px;
Altura: 200px;
Fronteira: sólido 10px vermelho; /*Resultado: 220.220*/
margem: 10px; /*Resultado: 220.220 (sem alteração)*/
preenchimento: 10px; /*Resultado: 240.240*/
Overflow: roll; /*Resultado: 240.240 (sem alteração)*/
}
window.onload = function () {
var obj = document.getElementById ("teste");
alerta (obj.offsetWidth + "," + obj.offsetHeight);
};
5. Obtenha o tamanho circundante do elemento
1. ClientLeft e ClientTop obtêm tamanho de borda
Esse conjunto de atributos pode obter o tamanho do elemento definir a borda esquerda e a borda superior. Atualmente, apenas os grupos de esquerda e os principais estão disponíveis, e a direita e o fundo não estão disponíveis. Se a largura dos quatro lados for diferente, você poderá obtê -lo diretamente através do estilo calculado ou usar os três grupos acima para obter o tamanho do elemento para obter a subtração.
Largura da borda direita: obj.offsetWidth-obj.clientwidth-obj.clientleft
Largura da borda inferior: obj.offsetheight-obj.clientheight-obj.clienttop
A cópia do código é a seguinte:
<div id = "test"> teste Div elemento </div>
#teste{
Background-Color: verde;
Largura: 200px;
Altura: 200px;
Border-top: sólido 10px vermelho; s
Right-direita: 20px sólido #00FF00;
fundo da borda: sólido 30px azul;
Border-Ift: Solid 40px #808080;
}
window.onload = function () {
var obj = document.getElementById ("teste");
alerta (obj.clientleft + "," + obj.clienttop); // 40,10
};
2. OffsetLeft e Offsettop
Esse conjunto de atributos pode obter a posição do elemento atual em relação ao elemento pai. Para obter a posição atual do elemento em relação ao elemento pai, é melhor configurá -lo para a posição de posição: absoluto; Caso contrário, os navegadores diferentes terão explicações diferentes.
um. Defina a posição como absoluto, todos os navegadores retornam o mesmo valor. como:
A cópia do código é a seguinte:
<div id = "test"> teste Div elemento </div>
#teste{
Background-Color: verde;
Largura: 200px;
Altura: 200px;
Posição: Absoluto;
Esquerda: 30px;
topo: 20px;
}
window.onload = function () {
var obj = document.getElementById ("teste");
alerta (obj.offsetleft + "," + obj.offsettop); // 30, 20
};
b. A adição da borda e da margem interna não afetará sua posição, mas a adição dos dados externos se acumulará.
3. Box.OffSetParent recebe o elemento pai
No OffsetParent, se o próprio elemento pai for <body>, não é de retornar um objeto corporal e o IE (IE6) retornará um objeto HTML. Se dois elementos estiverem aninhados, se a posição de posicionamento: absoluto não for usada no elemento pai, o OffsetParent retornará o objeto do corpo ou o objeto HTML. Portanto, ao obter OffsetLeft e Offsettop, o posicionamento do CSS é muito importante.
Se, em muitos níveis, a camada externa estiver posicionada, como podemos obter a distância entre os elementos na camada interna do corpo ou elementos HTML? Ou seja, obtenha a localização de qualquer elemento da página. Em seguida, podemos escrever funções e alcançá -las constantemente voltando para cima para obter acumulação.
A cópia do código é a seguinte:
box.offsetTop + box.offsetParent.offsetTop; // Quando há apenas duas camadas
função offsetleft (element) {
var esquerdo = element.OffSetLeft; // Obtenha a primeira distância da camada
var pai = element.OffSetParent; // Obtenha o primeiro elemento pai
while (pai! == null) {// se houver um elemento pai anterior
Esquerda += parent.offsetLeft; // Adicione as distâncias desta camada
pai = parent.offsetParent; // Obtenha o elemento pai desta camada
} // então continue o loop
retornar à esquerda;
}
4. Scrolltop e Scrollleft
Esse conjunto de propriedades pode obter o tamanho da área da barra de rolagem oculta (a área acima da barra de rolagem) ou definir para posicioná -la nessa área. Se você deseja rolar a barra de rolagem para sua posição inicial, pode escrever uma função:
A cópia do código é a seguinte:
função scrollstart (elemento) {
if (element.Scrolltop! = 0) {
element.Scrolltop = 0;
}
}
5. GetBoundingClientRect ()
Este método retorna um objeto retangular com quatro propriedades: esquerda, superior, direita e inferior. Indica a distância entre cada borda do elemento e o lado superior e esquerdo da página.
A cópia do código é a seguinte:
var box = document.getElementById ('caixa'); // obtenha elemento
alert (box.getBoundingClientRect (). Top); // A distância acima do elemento é do topo da página
alert (box.getBoundingClientRect (). direita); // a distância à direita do elemento à esquerda da página
alert (box.getBoundingClientRect (). Inferior); // A distância abaixo do elemento é do topo da página
alert (box.getBoundingClientRect (). esquerda); // a distância à esquerda do elemento à esquerda da página
Nota: IE, Firefox3+, Opera9.5, Chrome e Safari Support. No IE, as coordenadas padrão são calculadas a partir de (2, 2), resultando na distância final de dois pixels a mais que outros navegadores. Precisamos ser compatíveis.
A cópia do código é a seguinte:
document.documentElement.clienttop; // don-ie é 0, ou seja, 2
document.documentElement.clientleft; // don-ie é 0, ou seja, 2
functionGgetRect (elemento) {
var ret = element.getBoundingClientRect ();
var top = document.documentElement.clienttop;
var esquerdo = document.documentElement.clientleft;
retornar{
TOP: RECT.TOP - TOP,
Inferior: rect.bottom - em cima,
Esquerda: Rect.left - Esquerda,
Direita: Rect.right - Esquerda
}
}
Adicione bordas externas, margens internas, bordas e barras de rolagem, respectivamente, para testar se todos os navegadores são consistentes.
O exposto acima é todo o conteúdo descrito neste artigo. Eu espero que você possa gostar.