заполнение или значение поля в пикселях в виде целого числа с использованием jquery

<p>в jquery есть функции height () и width (), которые возвращают высоту или ширину в пикселях как целое число ...</p><p>как я могу получить отступ или значение поля элемента <strong>в пикселях и в виде целого числа</strong> с помощью jquery?</p><p>моей первой идеей было сделать следующее:</p><pre><code>var padding = parseint(jquery("myid").css("padding-top")); </code></pre><p>но если, например, в ems дано дополнение, как я могу получить значение в пикселях?</p><hr><p>глядя на плагин jsizes, предложенный крисом пебблом, я понял, что моя собственная версия была правильной :). jquery всегда возвращает значение в пикселях, так что просто разобрать его в целое число было решением.</p><p>благодаря крис пеббл и ян робинсон</p>

<p>вы должны быть в состоянии использовать css ( <a href="http://docs.jquery.com/css/css#name">http://docs.jquery.com/css/css#name</a> ). возможно, вам придется быть более конкретным, например, "padding-left" или "margin-top".</p><p>пример:</p><p><strong>css</strong></p><pre><code>a, a:link, a:hover, a:visited, a:active {color:black;margin-top:10px;text-decoration: none;} </code></pre><p><strong>js</strong></p><pre><code>$("a").css("margin-top"); результат 10px.если вы хотите получить целочисленное значение, вы можете сделать следующее:parseint($("a").css("margin-top")) </code></pre>

<p>сравните внешнюю и внутреннюю высоту/ширину, чтобы получить общий запас и отступ:</p><pre><code>var that = $("#myid"); alert(that.outerheight(true) - that.innerheight()); 

функция parseint имеет параметр radix, который определяет систему счисления, используемую при преобразовании, поэтому вызов parseint(jquery('#something').css('margin-left'), 10); возвращает левое поле в виде целого числа.это то, что использует jsizes.

пожалуйста, не загружайте другую библиотеку только для того, чтобы сделать то, что уже доступно изначально!функция .css() в jquery преобразует% и em в пиксельные эквиваленты для начала, а функция parseint() удалит 'px' из конца возвращаемой строки и преобразует его в целое число: <a href="http://jsfiddle.net/bxnxj/">http://jsfiddle.net/bxnxj/ $(document).ready(function () { var $h1 = $('h1'); console.log($h1); $h1.after($('padding-top: ' + parseint($h1.css('padding-top')) + '</div>')); $h1.after($('<div>margin-top: ' + parseint($h1.css('margin-top')) + '')); }); 

вот как вы можете получить окружающие размеры:var elem = $('#myid'); var margintopbottom = elem.outerheight(true) - elem.outerheight(); var marginleftright = elem.outerwidth(true) - elem.outerwidth(); var bordertopbottom = elem.outerheight() - elem.innerheight(); var borderleftright = elem.outerwidth() - elem.innerwidth(); var paddingtopbottom = elem.innerheight() - elem.height(); var paddingleftright = elem.innerwidth() - elem.width(); </code></pre><p>обратите внимание, что каждая переменная, например <code>paddingtopbottom</code>, содержит сумму полей с обеих сторон элемента; т.е. <code>paddingtopbottom == paddingtop + paddingbottom</code>. интересно, есть ли способ получить их отдельно. конечно, если они равны, вы можете разделить на 2 :)</p>

<p>эта простая функция сделает это:</p><pre><code>$.fn.pixels = function(property) { return parseint(this.css(property).slice(0,-2)); }; использование:var padding = $('#myid').pixels('paddingtop'); </code></pre>

<p>parse int</p><pre><code>parseint(canvas.css("margin-left")); </code></pre><p>возвращает 0 для 0px</p>

<p>вы можете просто взять их как <a href="http://docs.jquery.com/css">любой атрибут css</a> :</p><pre><code>alert($("#mybox").css("padding-right")); alert($("#mybox").css("margin-bottom")); </code></pre><p>вы можете установить их со вторым атрибутом в методе css:</p><pre><code>$("#mybox").css("padding-right", "20px"); правка: если вам нужно только значение пикселя, используйте parseint(val, 10):parseint($("#mybox").css("padding-right", "20px"), 10); </code></pre>

<p>хорошо, просто чтобы ответить на оригинальный вопрос:</p><p>вы можете получить заполнение как полезное целое число, например:</p><blockquote> <p>var padding = parseint ($ ("myid"). css ("padding-top"). replace ("ems", "")); </blockquote>если вы определили другое измерение, например, px, просто замените "ems" на "px". parseint интерпретирует строковую часть как неправильное значение, поэтому важно заменить его ... ничем.

вы также можете расширить фреймворк jquery чем-то вроде:jquery.fn.margin = function() { var margintop = this.outerheight(true) - this.outerheight(); var marginleft = this.outerwidth(true) - this.outerwidth(); return { top: margintop, left: marginleft }}; таким образом, добавляется функция в ваши объекты jquery под названием margin (), которая возвращает коллекцию, например функцию смещения.fx.$("#myobject").margin().top </code></pre>

<p>не используйте string.replace ("px", ""));</p><p>используйте parseint или parsefloat!</p>

<p>не до некро, но я сделал это, что может определять пиксели на основе различных значений:</p><pre><code>$.fn.extend({ pixels: function (property, base) { var value = $(this).css(property); var original = value; var outer = property.indexof('left') != -1 || property.indexof('right') != -1 ? $(this).parent().outerwidth() : $(this).parent().outerheight(); // em conversion factor base = base || 16; if (value == 'auto' || value == 'inherit') return outer || 0; value = value.replace('rem', ''); value = value.replace('em', ''); if (value !== original) { value = parsefloat(value); return value ? base * value : 0; } value = value.replace('pt', ''); if (value !== original) { value = parsefloat(value); return value ? value * 1.333333 : 0; // 1pt = 1.333px } value = value.replace('%', ''); if (value !== original) { value = parsefloat(value); return value ? (outer * value / 100) : 0; } value = value.replace('px', ''); return parsefloat(value) || 0; } }); </code></pre><p>таким образом, мы учитываем размеры и авто/наследование.</p>

<p>бесстыдно принят от <a href="https://stackoverflow.com/a/1901665/1250044">quickredfox</a> .</p><pre><code>jquersy.fn.cssnum = function(){ return parseint(jquery.fn.css.apply(this, arguments), 10); }; </code></pre><p><strong> обновление </strong></p><p>изменено на <code>parseint(val, 10)</code>, поскольку оно быстрее, чем <code>parsefloat</code>.</p><p> <a href="http://jsperf.com/number-vs-plus-vs-toint-vs-tofloat/20">http://jsperf.com/number-vs-plus-vs-toint-vs-tofloat/2</a> </p>

<p>я, вероятно, использую <a href="https://github.com/bramstein/jsizes">github.com/bramstein/jsizes</a> плагин jquery для отступов и полей очень удобным способом, спасибо ...</p>