Método outerWidth

O método outerWidth permite obter e modificar a largura de um elemento levando em consideração o preenchimento interno, a borda e seletivamente - as margens externas do elemento. É importante lembrar que obteremos o 'valor calculado' da largura (computed width). Erros de cálculo também podem ocorrer se o usuário alterar o tamanho da página, ou se o elemento ou seu elemento pai estiverem ocultos.

Sintaxe

É assim que podemos obter a largura do elemento. Este método pode aceitar um parâmetro opcional na forma de true ou false (false é o padrão), dependendo se as margens externas serão incluídas ou não. Em alguns casos, os valores obtidos podem ser fracionários:

javascript$(seletor).outerWidth([incluindo_margin]);

Para alterar a largura do elemento - você pode passar simplesmente um número (por exemplo 400), então as unidades de medida serão pixels, ou uma string, com a especificação das unidades de medida (por exemplo '10em'):

javascript$(seletor).outerWidth(novo valor, [incluindo_margin]);

Também podemos aplicar uma função definida a cada elemento no conjunto. Neste caso, o primeiro parâmetro da função receberá o índice do elemento no conjunto, e o segundo parâmetro - o valor atual da largura definida para o elemento específico. this dentro da função irá referenciar o elemento atual. O valor da largura do elemento mudará para aquele retornado pela função:

javascript$(seletor).outerWidth(function(índice no conjunto, valor atual da largura));

Exemplo

Vamos, para comparação, exibir informações sobre a largura do parágrafo #test, obtida pelos métodos width, innerWidth e outerWidth:

html<p id="test">texto</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>

cssp {
  margin: 10px;
  padding: 5px;
  border: 2px solid blue;
}

javascriptlet w1 = $('#test').width();
let w2 = $('#test').innerWidth();
let w3 = $('#test').outerWidth(false);
let w4 = $('#test').outerWidth(true);

$('#out1').text(w1);
$('#out2').text(w2);
$('#out3').text(w3);
$('#out4').text(w4);

Veja também