Autor publikacji: Virtual Patriot - Administrator

attr()

Data publikacji: Styczeń 02 2017
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - the attr function (LV4)

Przeznaczenie funkcji `attr()`

Za pomocą funkcji attr() możemy odwołać się do wartości posiadanej przez interesujący nas atrybut HTML.

Parametry funkcji `attr()`

            name

Przykładowe zapisy

attr(title)

attr(id)

attr(data-name)

name

Parametr name jest wymaganym parametrem funkcji attr(). Parametr name wskazuje na nazwę atrybutu HTML, do którego wartości chcemy się odwołać.

Występowanie funkcji `attr()`

content #attr()

Przykład funkcji `attr()`

  content:attr(data-item);

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Do początkowej zawartości przykładowego elementu "div" został dodany dodatkowy pseudoelement "::before" wraz z dodatkową treścią w postaci wartości posiadanej przez atrybut "data-item" przykładowego elementu "div", ponieważ do wspomnianego elementu "div" (między innymi za pomocą selektora "::before") została dodana właściwość "content" wraz z wartością w postaci funkcji "attr()", w której to funkcji została użyta wartość "data-item".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      div::before {
        content:attr(data-item);
        color:blue;
      }
    </style>
  </head>

  <body>

    <div data-item="kurs css">
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

Interpretacja funkcji `attr()`

: tak
: tak
: tak
: tak
: tak
: tak