Este blog demonstra o uso do elemento DOM altura do cliente em HTML.
Como usar o elemento DOM “clientHeight” em HTML?
O ' altura do cliente ” permite que os desenvolvedores calculem a altura do conteúdo visível de um elemento. Ele ajuda a posicionar os elementos em relação uns aos outros ou a determinar se um usuário rolou para a borda direita de um contêiner rolável. Ele também fornece informações sobre o espaço não utilizado restante na página da web.
Exemplo
Vamos ver um exemplo para uma melhor demonstração da propriedade “clientHeight”. Por exemplo, o “ ao clicar ” o ouvinte de evento é utilizado para exibir o resultado fornecido pelo “ altura do cliente ' propriedade:
< corpo >
< h2 eu ia = 'elemento' >< / h2 >
< h2 eu ia = 'elemento' ao clicar = 'showelementHeight()' >
Clique no artigo Linuxhint para mostrar a altura!
< / h2 >
< roteiro >
function showelementHeight() {
var exemplo = document.getElementById('elemento');
var elementHeight= exemplo.clientHeight;
alert('A altura é: ' + elementHeight + ' pixels.');
}
< / roteiro > >
< / corpo >
A explicação do trecho de código acima é descrita abaixo:
- Inicialmente, crie um “ ” marca dentro do “
” e forneça alguns dados fictícios a ela. Além disso, atribua um id de “ elemento ” ao elemento HTML selecionado. - Em seguida, adicione um “ onclick() ” ouvinte de evento que invoca o “ showelementHeight() ” quando o usuário clica no botão “ ' elemento.
- Então, dentro do “ showelementHeight() ” função cria uma variável chamada “ exemplo ” que atua como uma instância para o elemento HTML que tem um id de “ elemento ”.
- Em seguida, crie outra variável chamada “ ElementoAltura ’’ que armazena o resultado fornecido pela propriedade “clientHeight”.
- Depois disso, exiba o “ ElementoAltura '' variável na caixa de alerta usando o ' alerta() ” método.
No final, adicione as seguintes propriedades CSS para estilizar o “ h2 ' elemento:
< estilo >
#elemento {
margem: 20px;
preenchimento: 10px;
fundo- cor : darkcyan;
altura : 300 pixels;
texto- alinhar : Centro;
linha- altura : 100 pixels;
}
< / estilo >
No trecho de código acima, as seguintes propriedades CSS são atribuídas ao div com um id de “ elemento ”:
- O ' 20px ”, “ 10px ' e ' darkcyan ” os valores são fornecidos ao CSS “ margem ”, “ preenchimento ' e ' cor de fundo ” propriedades, respectivamente.
- Também utiliza “ altura ”, “ alinhamento de texto ' e ' altura da linha ” Propriedades CSS para aumentar a visibilidade do usuário.
Após a execução do trecho de código acima, a página da Web aparece assim:
A saída mostra que a altura do elemento selecionado é exibida na caixa de alerta, sempre que o usuário clica no elemento.
Conclusão
Para utilizar o “ altura do cliente ” em HTML, selecione o elemento HTML acessando o atributo id. Depois disso, anexe a propriedade “clientHeight” e exiba o resultado. É uma propriedade somente leitura e retorna o resultado em pixels. A propriedade “clientHeight” funciona dentro da tag “