Hvordan man interagerer med objektattributter med CSS3s attr () -funktion - dummier

Attr () -funktionen er interessant, fordi den lader dig interagere med enhver attribut af et objekt som en del af en stil. Du ser denne funktion brugt på en række unikke måder på internettet, selv om det tilsyneladende er en velbevaret hemmelighed for det meste.

Et websted, der viser en hurtig applikation, der er afhængig af attr (), er The New Hotness: Brug af CSS3 Visual Effects. Følgende procedure demonstrerer funktionen attr () på en enklere måde, så du bedre kan forstå de få eksempler online, der viser det på en detaljeret måde.

1. Opret en ny HTML5-fil med din teksteditor.

2. Indtast følgende kode for HTML-siden.

   Brug af attr () Funktionen
   
   Brug af attr () Funktionen
   Verden
   

   Alt du har her er en overskrift og afsnit. Bemærk, at afsnit definerer en standardattribut, id og en ikke-standardattribut, TestText. Attributtet du bruger til attr () -funktionen behøver ikke at være standard - du kan definere hvilken som helst attribut, der ønskes.

3. Gem filen som Attr. HTML.

4. Opret en ny CSS-fil med din teksteditor.

5. Indtast følgende CSS-stiloplysninger.

   #TestMe: før {indhold: attr (TestText);}
   

   Stilen begynder med at sige, at udgangen fra stilen skal vises før mærket refereres af TestMe som id. Derefter indstilles indholdet af dette område til den aktuelle værdi af testtekstattributten ved hjælp af attr () -funktionen.

6. Gem filen som Attr. CSS.

7. Indlæse Attr-eksemplet.

   Udgangen er stort set, hvad du ville forvente, Hello World. Attr () -funktionen kan gøre det muligt for dig at skjule og bruge alle mulige oplysninger på dine sider, genbruge information på forskellige måder eller endda udføre debugging-opgaver.