Como obter a largura do elemento em JavaScript
Na fase de teste de uma página da web ou do site enquanto projeta, obter as dimensões dos elementos incluídos no Modelo de Objeto do Documento (DOM) é de grande ajuda para ajustar várias funcionalidades adicionadas e formatá -las de acordo. Essa abordagem também resulta em destacar um site, tornando -o legível e um design geral de documentos acessíveis.
Este artigo demonstrará os métodos a serem considerados para calcular a largura de um elemento em JavaScript.
Como obter a largura de um elemento em JavaScript?
A largura de um elemento pode ser calculada em JavaScript, utilizando as seguintes abordagens:
- ““OffsetWidth" propriedade.
- ““ClientWidth" propriedade.
- ““getBoundingClientRect ()”Método.
Essas abordagens agora serão discutidas em detalhes um por um!
Método 1: Obtenha a largura do elemento em JavaScript usando a propriedade OffsetWidth
Esta propriedade pode ser aplicada para acessar um elemento contra o buscado “eu ia”E calcule sua largura externa.
Visão geral o exemplo a seguir para demonstração.
Exemplo
Em primeiro lugar, inclua um “
Em seguida, contenha a imagem especificada no “div”Elemento associado a um“eu ia”:
Depois disso, acesse a imagem contida e aplique o “OffsetWidth”Propriedade para calcular a largura da imagem:
var getElement = documento.getElementById ('img').largura de deslocamento;
Após o cálculo, acesse a seção de título especificada antes e exiba a largura da imagem usando o “InnerText" propriedade:
var get = document.getElementById ("cabeça")
pegar.InnerText = "A largura do elemento é:" + getElement;
pegar.INNERTEXT = "A largura do elemento é:" + largura;
Saída
Método 2: Obtenha a largura do elemento em JavaScript usando a largura do cliente
Propriedade
Esta propriedade também pode ser implementada semelhante à abordagem anterior. A principal diferença é que ele calcula a largura interna do elemento especificado.
Exemplo
Primeiro, revive os métodos discutidos acima para incluir um título:
Obtenha largura do elemento HTML usando JavaScript
Neste exemplo em particular, inclua o cabeçalho especificado contido no “div”Elemento especificado por“eu ia”. Este cabeçalho em particular será calculado para “largura”:
Este é um elemento de cabeçalho
Esta tag específica refere -se à largura calculada a ser exibida no DOM:
<H4 id = "status">H4><Br>
Agora, crie um botão com um anexo “ONCLICKEvento invocando a função getwidth ():
Por fim, defina uma função chamada “getWidth ()”. Aqui, busque o cabeçalho a ser calculado para largura. Na próxima etapa, aplique o “ClientWidth”Propriedade para executar a operação declarada e da mesma forma, o“InnerText”A propriedade exibirá a largura do cabeçalho:
função getWidth ()
var getElement = documento.getElementById ('myElement');
var get = document.getElementById ("status")
var largura = getElement.largura de cliente;
pegar.inerText = "A largura do elemento é" + largura + "px";
Saída
Método 3: Obtenha a largura do elemento em JavaScript usando o método getBoundingClientRect ()
Este método retorna o tamanho de um elemento. Este método pode ser integrado ao “larguraPropriedade para medir a largura do campo de entrada.
Veja o exemplo a seguir.
Exemplo
Primeiro, contenha uma entrada “texto”Campo com o valor de espaço reservado especificado e o evento anexado“OnMouseOver”:
Agora, defina uma função chamada “getWidth ()”E acesse o campo de entrada especificado. Este campo de entrada será calculado para o tamanho e a largura usando o “getBoundingClientRect ()”Método e a propriedade de largura, respectivamente.
Finalmente, exiba a largura calculada:
função getWidth ()
var getElement = documento.getElementById ('campo');
Var Position = GetElement.getBoundingClientRect ();
var largura = posição.largura;
alerta (largura);
Saída
Este artigo explicou os métodos para calcular a largura do elemento em JavaScript.
Conclusão
O "OffsetWidth”Propriedade, a“ClientWidth“Propriedade ou o“getBoundingClientRect ()”O método pode ser optado por obter a largura de um elemento em JavaScript. O "OffsetWidth”A propriedade pode ser usada para retornar a largura externa do elemento, o“ClientWidth“A propriedade pode ser utilizada para calcular a largura interna do elemento especificado ou o“getBoundingClientRect ()”Pode ser escolhido para calcular o tamanho do elemento especificado e extrair a largura dele. Este artigo demonstrou os métodos para calcular a largura de um elemento em JavaScript.