JQuery - att hantera css-egenskaper - Versionshistorik

PGJ: /* Att sätta egenskaper med css */

2019-01-12T21:03:56Z

Att sätta egenskaper med css

← Äldre version		Versionen från 12 januari 2019 kl. 21.03
Rad 40:		Rad 40:

	Vi kör ett minimalt exempel:		Vi kör ett minimalt exempel:
	<codepen pen="bEWyMW" tab="js" height="400">		<codepen pen="bEWyMW" tab="js,result" height="400">
	</codepen>		</codepen>

Rad 64:		Rad 64:

	Om du vill sätta flera CSS-egenskaper samtidigt, kan du skicka in egenskaperna i formen av ett objekt med egenskap/värde-par. <code>css</code> kommer att gå igenom objeketets medlemmar och sätta elementets egenskaper i enlighet med det du angivit. Ett exempel på detta:		Om du vill sätta flera CSS-egenskaper samtidigt, kan du skicka in egenskaperna i formen av ett objekt med egenskap/värde-par. <code>css</code> kommer att gå igenom objeketets medlemmar och sätta elementets egenskaper i enlighet med det du angivit. Ett exempel på detta:
	<codepen pen="jWmoQZ" tab="js" height="400">		<codepen pen="jWmoQZ" tab="js,result" height="400">
	</codepen>		</codepen>

PGJ: /* Att läsa CSS-egenskaper med css */

2019-01-12T21:03:22Z

Att läsa CSS-egenskaper med css

← Äldre version		Versionen från 12 januari 2019 kl. 21.03
Rad 12:		Rad 12:

	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 <code>css</code>. Ett exempel på det skulle kunna vara att vi angav något i <code>%</code> och att det kanske rapporteras i <code>px</code> 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 <code>css</code> är alla i <code>px</code> (i alla fall i Chrome, där vi testade detta exempel).		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 <code>css</code>. Ett exempel på det skulle kunna vara att vi angav något i <code>%</code> och att det kanske rapporteras i <code>px</code> 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 <code>css</code> är alla i <code>px</code> (i alla fall i Chrome, där vi testade detta exempel).
	<codepen pen="BjRPrP" tab="~~javascript~~,result" height="400">		<codepen pen="BjRPrP" tab="js,result" height="400">
	</codepen>		</codepen>

	==== normaliserade värden ====		==== 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:		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:
	<codepen pen="qbmGPw" tab="~~javascript~~,result" height="300">		<codepen pen="qbmGPw" tab="js,result" height="300">
	</codepen>		</codepen>

PGJ: /* Att läsa CSS-egenskaper med css */

2019-01-12T21:02:58Z

Att läsa CSS-egenskaper med css

← Äldre version		Versionen från 12 januari 2019 kl. 21.02
Rad 12:		Rad 12:

	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 <code>css</code>. Ett exempel på det skulle kunna vara att vi angav något i <code>%</code> och att det kanske rapporteras i <code>px</code> 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 <code>css</code> är alla i <code>px</code> (i alla fall i Chrome, där vi testade detta exempel).		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 <code>css</code>. Ett exempel på det skulle kunna vara att vi angav något i <code>%</code> och att det kanske rapporteras i <code>px</code> 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 <code>css</code> är alla i <code>px</code> (i alla fall i Chrome, där vi testade detta exempel).
	<codepen pen="BjRPrP" tab="~~Result~~" height="~~300~~">		<codepen pen="BjRPrP" tab="javascript,result" height="400">
	</codepen>		</codepen>

	==== normaliserade värden ====		==== 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:		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:
	<codepen pen="qbmGPw" tab="~~Result~~" height="300">		<codepen pen="qbmGPw" tab="javascript,result" height="300">
	</codepen>		</codepen>

PGJ: /* Att sätta egenskaper med css */

2017-02-08T13:51:01Z

Att sätta egenskaper med css

← Äldre version		Versionen från 8 februari 2017 kl. 13.51
Rad 35:		Rad 35:

	== Att sätta egenskaper med <code>css</code> ==		== Att sätta egenskaper med <code>css</code> ==
	När man ska ange en CSS-egenskap med <code>css</code> 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 ~~vad du värdet~~ som du vill sätta ~~egenskap~~ till.		När man ska ange en CSS-egenskap med <code>css</code> 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 vi läser ut värden med <code>css</code>, så påverkas alla element i en samling när vi använder <code>css</code> för att sätta egenskaper.		Till skillnad mot när man läser ut värden med <code>css</code>, så påverkas alla element i en samling när man använder <code>css</code> för att sätta egenskaper.

	Vi kör ett minimalt exempel:		Vi kör ett minimalt exempel:

PGJ: /* Att läsa CSS-egenskaper med css */

2017-02-08T13:49:36Z

Att läsa CSS-egenskaper med css

← Äldre version		Versionen från 8 februari 2017 kl. 13.49
Rad 34:		Rad 34:
	Element ska vara med i DOM för att <code>css</code> ska fungera korrekt. Det kan till och med inträffa ett körfel om den inte är det.		Element ska vara med i DOM för att <code>css</code> ska fungera korrekt. Det kan till och med inträffa ett körfel om den inte är det.

	=== Att sätta egenskaper med <code>css</code> ===		== Att sätta egenskaper med <code>css</code> ==
	När man ska ange en CSS-egenskap med <code>css</code> 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 vad du värdet som du vill sätta egenskap till.		När man ska ange en CSS-egenskap med <code>css</code> 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 vad du värdet som du vill sätta egenskap till.

PGJ: /* css */

2017-02-08T13:47:15Z

css

← Äldre version		Versionen från 8 februari 2017 kl. 13.47
Rad 2:		Rad 2:

	== <code>css</code> ==		== <code>css</code> ==
	Med metoden <code>css</code> kan man både läsa ut och sätta elements CSS-egenskaper.		Med metoden <code>css</code> 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.		Vi börjar att titta på hur man kan läsa ut CSS-egenskaper.

PGJ: /* Specialfall för värden */

2017-01-29T18:05:14Z

Specialfall för värden

← Äldre version		Versionen från 29 januari 2017 kl. 18.05
Rad 55:		Rad 55:

	==== Specialfall för värden ====		==== Specialfall för värden ====
	Du kan ange relativa värden genom att sätta ett <code>+=</code> eller <code>-=</code> 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.		Du kan ange relativa värden genom att sätta ett <code>+=</code> eller <code>-=</code> 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 <code>css</code> kommer jQuery att konvertera det till en sträng och lägga till <code>px</code> 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.		I de fall du skickar med ett numeriskt värde till <code>css</code> kommer jQuery att konvertera det till en sträng och lägga till <code>px</code> 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.

PGJ: /* CSS-prioritet */

2017-01-29T18:03:53Z

CSS-prioritet

← Äldre version		Versionen från 29 januari 2017 kl. 18.03
Rad 52:		Rad 52:

	==== CSS-prioritet ====		==== CSS-prioritet ====
	När vi sätter CSS-egenskaper med <code>css</code> 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. <code>< p style="color:red;"></code>. 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 <code>css</code> att bli den som visas. Ett undantag till detta skulle kunna vara att <~~cod~~>!important</code> är angivet för en egenskap och att detta värde därför trumfar <code>css</code>-värdet.		När vi sätter CSS-egenskaper med <code>css</code> 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. <code><p style="color:red;"></code>. 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 <code>css</code> att bli den som visas. Ett undantag till detta skulle kunna vara att <code>!important</code> är angivet för en egenskap och att detta värde därför trumfar <code>css</code>-värdet.

	==== Specialfall för värden ====		==== Specialfall för värden ====

PGJ: /* CSS-prioritet */

2017-01-29T18:03:04Z

CSS-prioritet

← Äldre version		Versionen från 29 januari 2017 kl. 18.03
Rad 52:		Rad 52:

	==== CSS-prioritet ====		==== CSS-prioritet ====
	När vi sätter CSS-egenskaper med <code>css</code> 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. <code>&~~ltp~~ style="color:red;"></code>. 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 <code>css</code> att bli den som visas. Ett undantag till detta skulle kunna vara att <cod>!important</code> är angivet för en egenskap och att detta värde därför trumfar <code>css</code>-värdet.		När vi sätter CSS-egenskaper med <code>css</code> 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. <code>< p style="color:red;"></code>. 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 <code>css</code> att bli den som visas. Ett undantag till detta skulle kunna vara att <cod>!important</code> är angivet för en egenskap och att detta värde därför trumfar <code>css</code>-värdet.

	==== Specialfall för värden ====		==== Specialfall för värden ====

PGJ: /* normaliserade värden */

2017-01-29T18:00:11Z

normaliserade värden

← Äldre version		Versionen från 29 januari 2017 kl. 18.00
Rad 20:		Rad 20:
	</codepen>		</codepen>

	I Chome ~~fick vi~~ tillbaka färgerna i <code>rgb</code>- och <code>rgba</code>-format. Du bör få samma resultat i de flesta nya, moderna webbläsare.		I Chome får man tillbaka färgerna i <code>rgb</code>- och <code>rgba</code>-format. Du bör få samma resultat i de flesta nya, moderna webbläsare.

	==== Egenskaper kan ha olika namn ====		==== Egenskaper kan ha olika namn ====