Ostatnio edytowany:

attr()

Autor: Virtual Patriot

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()

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ć.

Dostępne wartości

nazwa atrybutu HTML posiadanego przez dany element HTML

Wartość domyślna

brak

Właściwości CSS dla funkcji attr()

  1. content

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:#CBFFFF;
      }

      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()

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak