# 09: Getters och Setters - CSS-tricks

Begreppet getters och setter i JavaScript är bara en av de saker du bör förstå. De är trevliga i jQuery eftersom API är så konsekvent att när du först får det kan du ganska mycket bara gissa hur det kommer att fungera för olika metoder. På den mest grundläggande nivån ...

Setters gör något.
Getters returnerar ett värde .

Ofta kan en enda metod användas på något sätt. Ta till exempel höjdmetoden.

// Used as a "setter" - will set the height $("#example").height(100); // Used as a "getter" - will return a value var theHeight = $("#example").height();

Se skillnaden? Setter skickar en parameter när metoden används. Getter passerar ingenting . Det är så jQuery själv vet vad de ska göra. Det testar bara om det finns en parameter där eller inte. Om inte, beter sig det som en getter. Om den finns där, beter den sig som en setter. Det är bara en trevlig API-bekvämlighet snarare än att ha separata metoder som getHeight och setHeight.

Det är värt att notera att en getter som används av sig själv gör ingenting.

// Useless $("#example").height();

Och om du ställer in värdet på en variabel med en setter får du jQuery-objektet tillbaka.

// x will be a jQuery object containing #example var x = $("#example").height(100);

Det kan vara ett hårförvirrande, men också ett snyggt litet trick för att spara kod. Om du vet att du både måste cacha det jQuery-objektet och ställa in dess höjd, kan det lika gärna göra det i en kodrad.

Se pennan 8ff68485673396d452f650bfb437fb2a av Chris Coyier (@chriscoyier) på CodePen

Också nämns i artikeln är box-sizing: border-box;. Boxstorlek är en mycket användbar CSS-egenskap. Jag är en stor förespråkare för att ställa in den på alla element, som:

* ( box-sizing: border-box; )

Som noteras i videon gör detta också height()jQuery lite mer förutsägbart och konsekvent. Utan gränsboxuppsättning height()är lika med höjdegenskapen i CSS, eller vilken höjd elementet naturligtvis är, minus vaddering och kant. Med border-boxset height()är det exakt hur mycket höjd elementet tar upp på skärmen, inklusive stoppning och kantlinje. Utan border-boxuppsättning, för att få det, måste du använda outerHeight()i jQuery.