Style Attributten i HTML

Style attributten bliver brugt til at angive CSS styling regler direkte på elementerne. Regler angivet på denne måde vil overskrive regler i eksterne StyleSheets.

711 visninger

Edited: 2018-01-21 08:46

Style er en attribut i HTML, der bliver brugt til at angive såkaldt inline styling på HTML elementer. Det frarådes generelt at bruge den til andet end testing, fordi dens brug bryder med principperne om, at adskille præsentation fra indhold. I stedet bør man overveje at bruge et eksternt CSS StyleSheet.

style attributten kan indholde op til flere CSS egenskaber, det eneste som kræves er, at man adskiller hver egenskab med semikolon (;) som vist i eksemplet nedenfor:

<p style="background:#000;color:#ff0000;">Denne tekst er rød på sort baggrund.</p>

Når man angiver CSS via style attributten, så vil den få prioritet end hvad man angiver i sit eksterne StyleSheet.

Skift indholdet i style attributten med JavaScript

Man kan tilføje CSS egenskaber til style attributten på et element ved hjælp af JavaScript. Men her skal man være opmærksom på, at alle eksisterende egenskaber altså bliver overskrevet. Se et eksempel på dette nedenfor:

var element = document.getElementById("unique_element_id");
element.style.property = "background:#ff0000;font-size:2em;";

I JQuery vil man i stedet adskille hver egenskab med et komma:

var element = document.getElementById("unique_element_id");
$("p").css({"background": "#ff0000", "font-size": "2em"});

Fortæl os hvad du tænker: