jQuery Como obter a margem e o preenchimento do elemento?

105

Apenas me perguntando - como usar jQuery - posso obter elementos formatados com preenchimento total e margem, etc? ou seja, 30px 30px 30px ou 30px 5px 15px 30px etc.

eu tentei

var margT = jQuery('img').css('margin');
var bordT = jQuery('img').css('border');
var paddT = jQuery('img').css('padding');

Mas isso não funciona? http://jsfiddle.net/q7Mra/

Tom
fonte
Por favor, consulte o link abaixo que é semelhante. stackoverflow.com/questions/590602/…
Praveen

Respostas:

105

De acordo com a documentação do jQuery , propriedades CSS abreviadas não são suportadas.

Dependendo do que você entende por "preenchimento total", pode ser capaz de fazer algo assim:

var $img = $('img');
var paddT = $img.css('padding-top') + ' ' + $img.css('padding-right') + ' ' + $img.css('padding-bottom') + ' ' + $img.css('padding-left');
Elias Zamaria
fonte
sim, parece que você tem que fazer cada um individualmente :( o que é uma merda
Tom,
27
Não puxe assim. E se um for autoou 2%ou inherit?
Lightness Races in Orbit
@Dan - realmente agradeço o esforço Dan. desculpas por não esclarecer mais :( Desculpe perder seu tempo.
Tom,
3
Você está certo sobre os valores não numéricos. Acho que a resposta de Dan Short é mais robusta.
Elias Zamaria,
4
update : a partir do jQuery 1.9, passar um array de propriedades de estilo para .css () resultará em um objeto de pares de propriedade-valor. Por exemplo, para recuperar todos os quatro valores de largura da borda renderizados, você pode usar$( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ]).
Hussein Nazzal
193
var bordT = $('img').outerWidth() - $('img').innerWidth();
var paddT = $('img').innerWidth() - $('img').width();
var margT = $('img').outerWidth(true) - $('img').outerWidth();

var formattedBord = bordT + 'px';
var formattedPadd = paddT + 'px';
var formattedMarg = margT + 'px';

Verifique os documentos da API jQuery para obter informações sobre cada um:

Aqui está o jsFiddle editado mostrando o resultado.

Você pode realizar o mesmo tipo de operações para a Altura para obter sua margem, borda e preenchimento.

Dan Short
fonte
1
Se for esse o caso, você pode pegar os valores calculados, acrescentar 'px' e você terá os valores dos pixels.
Dan Short,
2
Você precisa atualizar sua pergunta para deixar isso claro então. Caso contrário, estaremos perdendo tempo escrevendo soluções para problemas que você não está tentando resolver :). Explique em sua pergunta exatamente os valores de retorno que você deseja. Você solicitou a margem total e o preenchimento do elemento, não os valores de margem individuais (que podem ser diferentes para margin-lefte margin-right, e podem ser emou px.
Dan Short
2
É, mas essa foi a minha edição em sua pergunta, não sua pergunta original :)
Dan Short
4
Isso é muito útil; o que fazer se os valores das margens esquerda e direita / preenchimento forem diferentes e você quiser, por exemplo, apenas a margem esquerda ou o valor do preenchimento?
jpap de
1
A margem superior não está conectada ao heightnão width?
JohnK
16

jQuery.css()retorna tamanhos em pixels, mesmo que o próprio CSS os especifique em em, ou como uma porcentagem, ou o que for. Ele anexa as unidades ('px'), mas você pode usar parseInt()para convertê-las em inteiros (ou parseFloat(), para onde as frações de pixels fizerem sentido).

http://jsfiddle.net/BXnXJ/

    $(document).ready(function () {
    var $h1 = $('h1');
    console.log($h1);
    $h1.after($('<div>Padding-top: ' + parseInt($h1.css('padding-top')) + '</div>'));
    $h1.after($('<div>Margin-top: ' + parseInt($h1.css('margin-top')) + '</div>'));
});
RavenHursT
fonte
3

Isso funciona para mim:

var tP = $("img").css("padding").split(" ");
var Padding = {
    Top: tP[0] != null ? parseInt(tP[0]) : 0,
    Right: tP[1] != null ? parseInt(tP[1]) : (tP[0] != null ? parseInt(tP[0]) : 0),
    Bottom: tP[2] != null ? parseInt(tP[2]) : (tP[0] != null ? parseInt(tP[0]) : 0),
    Left: tP[3] != null ? parseInt(tP[3]) : (tP[1] != null ? parseInt(tP[1]) : (tP[0] != null ? parseInt(tP[0]) : 0))
};

Exemplo de resultado:

Object {Top: 5, Right: 8, Bottom: 5, Left: 8}

Para fazer um total:

var TotalPadding = Padding.Top + Padding.Right + Padding.Bottom + Padding.Left;
Brutus
fonte
2

Fronteira

Eu acredito que você pode obter a largura da borda usando .css('border-left-width'). Você também pode buscar superior, direita e inferior e compará-los para encontrar o valor máximo. A chave aqui é que você precisa especificar um lado específico.

Preenchimento

Veja jQuery calcular padding-top como inteiro em px

Margem

Use a mesma lógica de borda ou preenchimento.

Como alternativa, você pode usar outerWidth . O pseudo-código deve ser
margin = (outerWidth(true) - outerWidth(false)) / 2. Observe que isso só funciona para encontrar a margem horizontalmente. Para encontrar a margem verticalmente, você precisaria usar outerHeight .

simshaun
fonte
Sua estratégia de margem não funciona no Firefox, ela retornará 0 toda vez que você tiver preenchimento horizontal "automático", por exemplo, para centralizar o elemento.
Ben Dilts
2

Eu tenho um trecho que mostra como obter os espaçamentos dos elementos com jQuery:

/* messing vertical spaces of block level elements with jQuery in pixels */

console.clear();

var jObj = $('selector');

for(var i = 0, l = jObj.length; i < l; i++) {
  //jObj.eq(i).css('display', 'block');
  console.log('jQuery object:', jObj.eq(i));
  console.log('plain element:', jObj[i]);

  console.log('without spacings                - jObj.eq(i).height():         ', jObj.eq(i).height());
  console.log('with padding                    - jObj[i].clientHeight:        ', jObj[i].clientHeight);
  console.log('with padding and border         - jObj.eq(i).outerHeight():    ', jObj.eq(i).outerHeight());
  console.log('with padding, border and margin - jObj.eq(i).outerHeight(true):', jObj.eq(i).outerHeight(true));
  console.log('total vertical spacing:                                        ', jObj.eq(i).outerHeight(true) - jObj.eq(i).height());
}
Andreas
fonte
0

Se o elemento que você está analisando não tiver nenhuma margem, borda ou qualquer outra definição, você não poderá devolvê-lo. No topo, você poderá obter 'auto', que normalmente é o padrão.

Pelo seu exemplo, posso ver que você tem margTcomo variável. Não tenho certeza se está tentando obter margem superior. Se for esse o caso, você deve usar .css('margin-top').

Você também está tentando obter a estilização de 'img' que resultará (se você tiver mais de um) em uma matriz.

O que você deve fazer é usar o .each()método jquery.

Por exemplo:

jQuery('img').each(function() {
    // get margin top
    var margT = jQuery(this).css('margin-top');

    // Do something with margT
});
José P. Airosa
fonte
-1
$('img').margin() or $('img').padding()

Retorna:

{bottom: 10 ,left: 4 ,top: 0 ,right: 5}

Obter valor:

$('img').margin().top

Editar:

use o plugin jquery: jquery.sizes.js

Querer fazer
fonte
1
Não vejo nenhuma função margin () em jQuery.
Ortomala Lokni