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 ett elements 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, 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).
normaliserade värden
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:
I Chome får man tillbaka färgerna i rgb- och rgba-format. Du bör få samma resultat i de flesta nya, moderna webbläsare.
Egenskaper kan ha olika namn
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.
Att läsa ut flera egenskaper samtidigt
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är man ska ange en CSS-egenskap med css anger man oftast två inparametrar. Först måste du förstås ange vilken egenskap du vill påverka och som nästa parameter anger du det värde som du vill sätta egenskapen till.
Till skillnad mot när man läser ut värden med css, så påverkas alla element i en samling när man använder css för att sätta egenskaper.
Vi kör ett minimalt exempel:
I exemplet sätter vi bakgrundsfärgen på våra p-element. I CSS-delen har vi först satt att alla element ska sättas till orange. Detta är grundfärgen som de har innan vår JavaScript-kod exekveras. I JavaScript sätter vi sedan olika färger på varje element. Vi använder lika olika notationer för hur vi anger färgvärdet på varje rad. Här kan man förstås använda alla varianter som fungerar med CSS.
En sak man kan lägga märke till i exemplet ovan är att på de två första raderna anger vi CSS-egenskapen som "background-color", medan vi på de två sista raderna använder backgroundColor. Den senare är den namngivningsvariant som DOM tycker man ska använda, medan den första är den som vi är vana med ifrån stylesheets.
jQuery möjliggör att vi kan använda bägge alternativen. Fördelen med DOM-varianten är att vi inte behöver sätta egenskapsnamnet inom citattecken. Det går förstås inte att göra med stylesheets-varianten, då JavaScript skulle tro att background-color betydde att vi ville utföra en subtraktion. Detta gäller förstås bara för flerords-egenskaper som innehåller "-"-tecken.
CSS-prioritet
När vi sätter CSS-egenskaper med css så sätts de direkt på elementet och inget förändras i något stylesheet. Det är alltså samma sak som skulle hända om vi angav CSS på ett HTML-element med ett attribut, t.ex. <p style="color:red;">. Som du kanske minns ifrån CSS-delen så har CSS-egenskaper som läggs direkt på element mycket hög prioritet. I de flesta fall kommer de att trumfa regler som anges i stylesheets. Det gör att i nästan alla fall så kommer den CSS du anger med css att bli den som visas. Ett undantag till detta skulle kunna vara att !important är angivet för en egenskap och att detta värde därför trumfar css-värdet.
Specialfall för värden
Du kan ange relativa värden genom att sätta ett += eller -= före värdet. jQuery kommer då att läsa ut det värde som gäller just nu och förändra detta i enlighet med det relativa värde som du angav. Det är alltså samma sak som om du skulle läst ut nuvarande värde, förändrat det och sedan skrivit tillbaka, med skillnaden att jQuery gör det mesta av jobbet åt dig. Det går antagligen inte snabbare, men det är kortare och bekvämare att skriva.
I de fall du skickar med ett numeriskt värde till css kommer jQuery att konvertera det till en sträng och lägga till px efter talet. Om du inte vill att detta ska ske, måste du skicka in värdet som en sträng med korrekt måttenhet angiven.
Om du skickar in en tomsträng som värde till en egenskap, kommer egenskapen i fråga att tas bort ifrån den CSS som direkt påverkar elementet. Om egenskapen är satt genom ett stylesheet kommer den fortfarande att gälla. Borttagningen gäller alltså bara för egenskaper som är direkt kopplade till elementet Det vill säga såna som antingen är satta via HTML-attributet style eller via JavaScript/jQuery.
Om du anger en egenskap som kräver olika prefix för olika webbläsare, så kommer jQuery att sköta detta åt dig. Ett exempel på detta kan vara egenskapen user-select som kommer att resultera i -webkit-user i Chrome, -moz-user-select i Firefox och -ms-user-select i Internet Explorer.
Om du vill sätta flera CSS-egenskaper samtidigt, kan du skicka in egenskaperna i formen av ett objekt med egenskap/värde-par. css kommer att gå igenom objeketets medlemmar och sätta elementets egenskaper i enlighet med det du angivit. Ett exempel på detta:
Det går förstås att använda objekt-varianten även om du bara vill sätta en egenskap.