javascript - Padding- eller margverdi i piksler som heltall ved bruk av jQuery

jQuery har height() og width() funksjoner som returnerer høyden eller bredden i piksler som heltall...

Hvordan kan jeg få en padding- eller marginverdi for et element i piksler og som heltall ved å bruke jQuery?

Min første idé var å gjøre følgende:

var padding = parseInt(jQuery("myId").css("padding-top"));

Men hvis polstring er gitt i em for eksempel, hvordan kan jeg få verdien i piksler?

Når jeg kikket på JSizes-pluginen foreslått av Chris Pebble, innså jeg at min egen versjon var den riktige :). jQuery returnerer alltid verdien i piksler, så det å bare parse den til et heltall var løsningen.

Takk til Chris Pebble og Ian Robinson

Svar #1

Du bør kunne bruke CSS (http://docs.jquery.com/CSS/css#name). Du må kanskje være mer spesifikk, for eksempel «padding-left» eller «margin-top».

Eksempel :

CSS

a, a:link, a:hover, a:visited, a:active {color:black;margin-top:10px;text-decoration: none;}

JS

$("a").css("margin-top");

Resultatet er 10px.

Hvis du vil få heltallsverdien, kan du gjøre følgende:

parseInt($("a").css("margin-top"))

Svar #2

Sammenlign ytre og indre høyder/bredder for å få total margen og polstring:

var that = $("#myId");
alert(that.outerHeight(true) - that.innerHeight());

Svar #3

Funksjonen parseInt har en "radix"-parameter som definerer tallsystemet som brukes ved konverteringen, så å kalle parseInt(jQuery('#something').css('margin-left'), 10); returnerer venstremarginen som et heltall.

Dette er det JSizes bruker.

Svar #4

VÆR SÅ SNILL ikke gå og last inn et annet bibliotek bare for å gjøre noe som allerede finnes nativt!

jQuerys .css() konverterer % og em til deres piksel-ekvivalent fra starten av, og parseInt() vil fjerne 'px' fra slutten av den returnerte strengen og konvertere den til et heltall:

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>'));
});

Svar #5

Her er hvordan du kan få de omkringliggende dimensjonene:

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();

Vær oppmerksom på at hver variabel, paddingTopBottom for eksempel, inneholder summen av marginene på begge sider av elementet; det vil si, paddingTopBottom == paddingTop + paddingBottom. Jeg lurer på om det finnes en måte å få dem hver for seg. Selvfølgelig, hvis de er like, kan du dele på 2 :)

Svar #6

Du kan bare hente dem på samme måte som med hvilken som helst CSS-egenskap:

alert($("#mybox").css("padding-right"));
alert($("#mybox").css("margin-bottom"));

Du kan sette dem med et annet attributt i css-metoden:

$("#mybox").css("padding-right", "20px");

REDIGER: Hvis du bare trenger pixelverdien, bruk parseInt(val, 10):

parseInt($("#mybox").css("padding-right", "20px"), 10);

Relaterte artikler