attrとは
- ここで説明するattr とは次の語句からなるCSSの関数です。
- attribute
- 読み: アトリビュート
意味: 属性
attr関数の概要
この関数は要素に付けられた任意の属性の値を返します。
attr関数の引数には要素に付けられた属性名を指定します。
注意点としてはattr関数で取得できる値は、あくまでも要素で定義している属性の値だということです。
例えばCSSを使ってimg要素のwidthプロパティを設定したからといって attr関数で、その要素のwidth属性の値を取得できるわけではないということです。
imgタグの中でwidth属性として設定していない場合、この関数を使う意味はありません。
構文
サンプルを見る前に構文を確認しておきます。この関数の記述は以下のような書き方になります。
セレクター{プロパティ名: attr(Attribute-Name);}
セレクター::before{content: attr(Attribute-Name);} /*推奨*/
セレクター::after{content: attr(Attribute-Name);} /*推奨*/
セレクター::before{content: attr(Attribute-Name Type-or-Unit [, Attr-Fallback ]);}
セレクター::after{content: attr(Attribute-Name Type-or-Unit [, Attr-Fallback ]);}
- プロパティに代入する値として使うことは実験段階であり、実用的ではありません。
- 実験段階のものを外したAttribute-Name(属性名)だけを指定することを推奨します。
- 実験段階のものを外したAttribute-Name(属性名)だけを指定することを推奨します。
- Type-or-Unitは値の単位を示します。またAttr-Fallbackは属性が存在しない、または参照できない場合の代替値を指定します。
- Type-or-Unitは値の単位を示します。またAttr-Fallbackは属性が存在しない、または参照できない場合の代替値を指定します。
実機サンプルとサンプルコード
ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。
サンプルに使うのはdiv要素です。この要素にattr関数を使って任意の属性の値を取得、または利用してみます。
参考: 指定した属性値をCSSで取得する
このサンプルではid属性の値に"idDiv"を設定したdiv要素を使用しています。 ここでは::after疑似要素を使いコンテンツの追加をするとともに、この要素のid属性の値をattr関数で取得して表示しています。
<body>
<div id="idDiv">これはdiv要素です。<br></div>
</body><style>
#idDiv{
margin: 10px;
padding: 10px;
border: thin solid #aaa;
background-color: khaki;
width: fit-content;
}
#idDiv::after{
content: "この要素のid属性の値は " attr(id) "です。";
}
</style>実験: attr関数の引数をプロパティ設定の代入値として利用する
ここではattr関数で取得したカスタムデータ属性の値をwidthとheightの設定値として代入してみます。 これはブラウザによっては、まだ実装されていない実験的な扱い方であり、このサンプルも実験として作りました。
あなたの使っているブラウザがこの機能に対応していれば、要素は300pxの正方形を描きます。 もしも、100pxの正方形を描いたならカスタムデーターではなく、フォールバック値を認識できたことになります。 それ以外の数値ならブラウザはこの記法に対応していないことになります。
javascriptを使い要素の後に実測の結果を表示するようにしていますので参考にしてください。
<body>
<div id="idDivExperiment" data-myLength="300"></div>
</body><style>
#idDivExperiment{
margin: 10px;
border: thin solid #aaa;
background-color: khaki;
width: attr(data-myLength px, "100px");
height: attr(data-myLength px, "100px");
}
#idDivExperiment::after{
content: attr(data-myLength) "pxの正方形を描いていれば成功です。";
}
</style>