Como definir dimensões dos elementos HTML usando jQuery

Definir as dimensões dos elementos HTML corretamente é altamente significativo ao estruturar o layout de uma página da web, porque as dimensões certas aprimoram a aparência geral do seu site, que, em troca, aumenta a experiência do usuário. O jQuery fornece muitos métodos que ajudam você a executar esta tarefa com grande facilidade.

As dimensões dos elementos HTML podem ser definidas usando os métodos jQuery abaixo mencionados.

1. Método Width ()
2. Altura () Método
3. Método InnnerWidth ()
4. Método InnnerHeight ()
5. Método externo ()
6. Método OuterHeight ()

Vamos explorá -los em detalhes.

Método Width ()

Para o objetivo de definir ou buscar a largura dos elementos html, o método width () é usado.

Esse método funciona de uma maneira que, quando é usado apenas para buscar a largura de um elemento, ele retorna a largura do primeiro elemento correspondente, no entanto, quando usado para definir a largura, define a largura de todos os elementos correspondentes.

Sintaxe

Para buscar a largura de um elemento.

$ (seletor).largura()

Para definir a largura de um elemento.

$ (seletor).largura (valor)

Exemplo

Suponha que você queira alterar a largura de um elemento usando o método jQuery width (). Use o código abaixo.

Html

Defina a largura

No código HTML acima, criamos um e um elemento. Além disso, demos algum estilo ao elemento usando CSS embutido.

jQuery

$ (documento).pronto (function ()
$ ("#botão").clique (function ()
$ ("div").largura (500);
);
);

Neste código jQuery, o método width () está sendo usado para definir uma nova largura do elemento para 500px.

Saída

Antes de clicar no botão.

Depois de clicar no botão.

A largura do elemento foi alterada.

Método Heigth ()

Este método funciona de maneira semelhante ao método de largura (), com a diferença óbvia de que é usado para dar ou buscar a altura dos elementos html.

Esse método também funciona de uma maneira que, quando é usado apenas para buscar a altura de um elemento, extrai a altura do primeiro elemento que corresponde ao elemento especificado, no entanto, quando usado para definir a altura, define a altura de todos os correspondentes correspondentes elementos.

Sintaxe

Para buscar a altura de um elemento.

$ (seletor).altura()

Para definir a altura de um elemento

$ (seletor).altura (valor)

Exemplo

Suponha que você queira definir alguma altura de um elemento usando o método jQuery Height (). Siga o código abaixo.

Html

Digite seu nome:


Exibir a altura do campo de entrada

Aqui criamos, um campo de entrada e definimos uma altura de 10px, largura de 200px e cor de fundo rosa.

Além disso, nós criamos um botão.

jQuery

$ (documento).pronto (function ()
$ ("botão").clique (function ()
$ ("entrada").altura (20);
);
);

Usamos o método jQuery Height () aqui para alterar a altura do campo de entrada. A altura mudará quando você clicar no botão.

Saída

Antes de clicar no botão.

Depois que o botão é clicado.

O método de altura () está funcionando corretamente.

Método InnerWidth ()

Para o objetivo de buscar a largura interna do primeiro elemento que corresponde ao elemento especificado, o método InnerWidth () é usado.

Sintaxe

$ (seletor).Innerwidth ()

Exemplo

Suponha que você queira exibir a largura interna de uma imagem. Use o seguinte código.

Html

Exibir a largura interna da imagem

Aqui, exibimos uma imagem usando a tag, além disso, definimos sua altura, largura, preenchimento e borda. Junto com a imagem, também criamos um botão que será usado para exibir a largura interna da imagem.

jQuery

$ (documento).pronto (function ()
$ ("botão").clique (function ()
alerta ("Largura interna da imagem:" + $ ("img").Innerwidth ());
);
);

No código acima, estamos usando o método Innerwidth () para exibir a largura interna da imagem.

Saída

Antes do botão ser clicado.

Depois que o botão é clicado.

A largura interna da imagem foi exibida.

Observação: O método InnerWidth () inclui preenchimento também ao exibir a largura interna de um elemento.

Método InnerHeight ()

O método InnerHeight () é usado para buscar a altura interna do primeiro elemento que corresponde ao elemento especificado.

Sintaxe

$ (seletor).InnerHeight ()

Exemplo

Vamos usar o exemplo usado na seção acima para entender o funcionamento do método jQuery inerHeight ().

jQuery

$ (documento).pronto (function ()
$ ("botão").clique (function ()
Alerta ("Altura interna da imagem:" + $ ("img").INNERHEight ());
);
);

Usamos o método InnerHeight () para extrair a altura interna da imagem do cachorro.

Saída

Antes de clicar no botão.

Depois de clicar no botão.

O método InnerHeight () está funcionando corretamente.

Observação: O método InnerHeight () também inclui preenchimento enquanto exibe a altura interna de um elemento.

Método externo ()

Para o objetivo de buscar a largura externa do primeiro elemento que corresponde ao elemento especificado, o método OuterWidth () é usado.

Sintaxe

$ (seletor).OuterWidth ()

Exemplo

Suponha que você queira extrair a largura externa de um elemento div. Aqui está como você faz isso.

Html

Largura externa da div

Criamos uma div e damos uma certa cor de fundo, altura, largura, preenchimento e borda. Além disso, também criamos um botão.

jQuery

$ (documento).pronto (function ()
$ ("botão").clique (function ()
Alerta ("Largura externa da div:" + $ ("div").OuterWidth ());
);
);

Aqui usamos o método jQuery OuterWidth () para exibir a largura externa do elemento div.

Saída

Antes que o botão seja clicado.

Quando o botão é clicado.

O método OuterWidth () está funcionando corretamente.

Observação: O método OuterWidth () calcula o preenchimento e a borda ao exibir a largura externa de um elemento.

Método OuterHeight ()

O método OuterHeight () é usado para buscar a altura externa do primeiro elemento que corresponde ao elemento especificado.

Sintaxe

$ (seletor).ExterHeight ()

Exemplo

Vamos usar o exemplo usado na seção acima para entender o funcionamento do método jQuery OuterHeight ().

jQuery

$ (documento).pronto (function ()
$ ("botão").clique (function ()
Alerta ("Altura externa da div:" + $ ("div").ExterHeight ());
);
);

Usamos o método OuterHeight () para extrair a altura externa do elemento div.

Saída

Antes de clicar no botão.

Depois de clicar no botão.

O método OuterHeight () está funcionando corretamente.

Observação: O método do OuterHeight () também inclui preenchimento também ao mesmo tempo em que exibe a altura externa de um elemento.

Conclusão

As dimensões de um elemento HTML podem ser definidas usando os vários métodos jQuery que são; largura (), altura (), innerwidth (), innerHeight (), OuterWidth () e OuterHeight (). Os métodos de largura () e altura () definem ou buscam a largura e a altura dos elementos, respectivamente. Enquanto o método InnerWidth (), InnerHeight (), OuterWidth () e OutherHeight () busca a largura interna, a altura interna, a largura externa e a altura externa dos primeiros elementos correspondentes, respectivamente. Todos esses métodos são explicados em detalhes, juntamente com os exemplos relevantes.