JQuery - att hantera css-egenskaper

Nu när vi lärt oss hur man hanterar dynamiska element med jQuery är det dags att titta på hur man kan hantera CSS dynamiskt. jQuery har ett antal bra funktioner avsedda för att hantera CSS i webbapplikationer.

css

Med metoden css kan man både läsa ut och sätta CSS-egenskaper. Vi börjar att titta på hur man kan läsa ut CSS-egenskaper.

Att läsa CSS-egenskaper med css

För att läsa ut en CSS-egenskap behöver vi ha en referens till ett element. Om vi har en samling av element, kommer css att utföras på det första elementet i samlingen. När vi kallar på css på ett element, så anger vi en inparameter som anger vilken, eller vilka CSS-egenskaper vi vill komma åt.

Vad vi får tillbaka ifrån css är det beräknade värdet för CSS-egenskapen. Det vill säga den slutliga egenskapen som fås efter att alla CSS-regler har utförts. Många olika regler kan alltså ha haft ett finger med i spelet och påverkat det slutliga resultatet. Har vi t.ex. satt en bredd procentuellt, så kommer förstås den slutliga bredden att bero på vilken storlek föräldraelementen hade.

Att vi får det beräknade värdet, kan innebära att trots att vi vet att något angavs på ett visst vis i vår stylesheet, kanske vi får en helt annan typ av värde ifrån css. Ett exempel på det skulle kunna vara att vi angav något i % och att det kanske rapporteras i px istället. Detta sker på grund av att webbläsaren tolkat och räknat om egenskapsvärdet till något "enhetligt". Om du tittar på följande exempel så kommer du att få se prov på detta. Alla egenskaperna är angivna i olika måttenheter, men det värden vi får ut ifrån css är alla i px (i alla fall i Chrome, där vi testade detta exempel).

See the Pen BjRPrP by Patrik Grip-Jansson (@PGJ) on CodePen.

Olika webbläsare kan rapportera CSS-egenskaperna på olika vis. Ett exempel på detta är hur färgvärden kan rapporteras helt olika beroende på vilken webbläsare man använder. I vissa fall kanske vi får tillbaka exakt det färgvärde vi satt i vår stylesheetet, i andra webbläsare kanske vi får en omräknad, normaliserad färg. Här är ett exempel som du kan köra i lite olika webbläsare och se vilka resultat du får:

See the Pen qbmGPw by Patrik Grip-Jansson (@PGJ) on CodePen.

I Chome fick vi tillbaka färgerna i rgb</- och rgba-format.

CSS-egenskaper har inte alltid samma namn i DOM som de har när vi anger dem i stylesheets. Den vanligaste skillnaden är flerords-egenskaper har lite annorlunda namn. Oftast tas "-" bort och istället sätts efterföljande bokstav som versal (stor bokstav). Ett exempel på detta kan vara background-color som i DOM heter backgroundColor. När du använder jQuerys css fungerar det med bägge varianterna av namnet.

jQuery försöker hjälpa till och fixa skillnader som kan vara mellan olika webbläsare. Detta gäller främst vad webbläsarna kallar de olika CSS-egenskaperna internt. Ett exempel på detta kan vara att att Internet Explorer internt kallar float-egenskapen för styleFloat, medan de flesta andra webbläsare kallar den för cssFloat. jQuery låter dig använda float och rapporterar det korrekta värdet, oavsett vilken webbläsare du kör.

Man kan skicka med flera egenskaper samtidigt som inparametrar till css. Som svar får man då tillbaka en array där varje värde återges i form av ett egenskap/värde par.

Problem

Alla webbläsarna tillåter inte att vi läser ut samlingsegenskaper ifrån dem. Det är alltså inte säkert att du får tillbaka något värde om du försöker läsa ut t.ex. margin. Det är alltid säkrast att läsa ut de individuella egenskaperna var för sig, utan att använda samlingsegenskapsvarianten.

Element ska vara med i DOM för att css ska fungera korrekt. Det kan till och med inträffa ett körfel om den inte är det.

Att sätta egenskaper med css

Nästa aktivitet

jQuery - att koppla sig till händelser