CSS-Attribut attr()

attr() sollte, um genau zu sein, kein Attribut, sondern eine CSS-Funktion sein. Schauen wir uns zunächst die Einführung zu MDN an:

Zusammenfassung

Die Die CSS-Funktion attr() wird verwendet, um den Wert eines Attributs des ausgewählten Elements abzurufen und im Stylesheet zu verwenden. Sie kann auch für Pseudoelemente verwendet werden und in diesem Fall den Wert des Attributs im Pseudoelement. Das ursprüngliche Element des Elements wird zurückgegeben.

Die Funktion attr() kann mit jeder CSS-Eigenschaft verwendet werden, die Unterstützung für andere Eigenschaften als den Inhalt ist jedoch experimentell.

Einfache Übersetzung, Englischniveau ist hauptsächlich begrenzt Dies dient als Referenz für Freunde, deren Englisch schlechter ist als meines. Experten können es ignorieren:

Die CSS-Funktion attr() wird verwendet, um den Attributwert des ausgewählten Elements zu erhalten, und wird in der Stildatei verwendet. Es kann auch in Pseudoklassenelementen verwendet werden. Bei Verwendung in Pseudoklassenelementen erhält es den Wert des ursprünglichen Elements des Pseudoelements. Die Funktion

attr() kann mit jedem CSS-Attribut verwendet werden, aber mit Ausnahme des Inhalts ist der Rest noch experimentell (vereinfacht gesagt, sie ist instabil und wird möglicherweise nicht von Browsern unterstützt).

Wie verwende ich es konkret? Ich habe es vor einiger Zeit verwendet, um die Eingabeaufforderungsfunktion für die Schaltfläche zu implementieren.

<p class="wrap">
  <a href="#" class="btn" data-tip="点击作答">一个按钮</a></p>

.btn {
  display: inline-block;
  padding: 5px 20px;
  border-radius: 4px;
  background-color: #6495ed;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  position: relative;
}.btn::before {
  content: attr(data-tip);
  width: 80px;
  padding: 5px 10px;
  border-radius: 4px;
  background-color: #000;
  color: #ccc;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  opacity: 0;
  transition: all .3s;
}.btn::after {
  content: '';
  border: 8px solid transparent;
  border-top: 8px solid #000;
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translate(-50%); 
  opacity: 0;
  transition: all .3s;
}.btn:hover::before {
  top: -40px;
  opacity: 1;
}.btn:hover::after {
  top: -13px;
  opacity: 1;
}

Natürlich kann auch attr() abgerufen werden. Es gibt noch weitere andere Attribute, wie das href-Attribut im a-Tag usw. Sie können weitere Verwendungen selbst ausprobieren.

Weitere Artikel zum Thema CSS-Attribut attr() finden Sie auf der chinesischen PHP-Website!