Статьи

JQuery получить заполнение элемента / маржа

Ноябрь 26, 2018

Сегодня я смотрел, как получить и установить значения отступов / полей для элементов DOM. Я больше смотрю на конкретное расположение внешних полей и прокладок. Как вы, возможно, знаете, с помощью CSS можно установить отступы и отступы для элементов, но получить правильные значения может быть проблематично. 

//sets
$("div.header").css("margin","10px");
$("div.header").css("padding","10px");

Здравый смысл, вы могли бы подумать, что это будет работать, но, похоже, не работает. 

 //gets
$("div.header").css("margin");
$("div.header").css("padding");

Попробуйте сами (вставьте код ниже в Firebug). Вы увидите пустые значения, возвращаемые для полей и отступов. Может я что-то здесь упускаю? 

 (function($){

function logMarginPadding(elem)
{
//gets
var margin = elem.css("margin"),
padding = elem.css("padding");
console.log("margin="+margin+" padding="+padding);
}

var elem = $("div.header"); //set the element to inspect

logMarginPadding(elem);
//sets
elem.css("margin","10px");
elem.css("padding","10px");
logMarginPadding(elem);

})(jQuery);

Это похоже на работу. 

 //get top margin of element
alert($("div.header").css("margin-top"));

//get top margin of element as integer value
alert($("a").css("margin-top").replace("px", ""));

//if using it with a calculation you must convert it to an integer
parseInt($("a").css('padding-left').replace("px", ""));

В любом случае, так я получил отступ для элемента. Не идеально и работает только в том случае, если отступы одинаковы (одинаково с каждой стороны). Просто получите ширину и внешнюю ширину, разделенные на 2. 

 var item = $('div.header');
width = item.width(),
padding = (item.outerWidth()-width)/2;

Существует довольно популярный плагин jsizes, который может быть хорошим решением для получения / установки значений margin / padding для элементов.

JSizes — это небольшой плагин для библиотеки jQuery JavaScript, который добавляет поддержку запросов и установки свойств min-width, min-height, max-width, max-height, border — * — width, margin и padding CSS.

Дальнейшие чтения
В jQuery есть функции externalWidth и outerHeight, которые по умолчанию включают рамку и отступ, а также поле, если первый аргумент функции равен true
http://api.jquery.com/outerHeight/
http://api.jquery.com/outerWidth/

36
Share: