---
title: attr
slug: Web/CSS/attr()
translation_of: Web/CSS/attr()
---
<div>{{CSSRef}}</div>
<h2 id="概要">概要</h2>
<p><code>attr()</code> <a href="/zh-TW/docs/Web/CSS">CSS</a> 函數使用於樣式取得被選取之元素中特定屬性的值。它也可以用在擬元素選取項(Pseudo-element)，在此情形下，其屬性值來自於擬元素選取項相依的原始元素。</p>
<p><code>attr()</code> 函數可以被用在任何 CSS 屬性，但除了 content 以外的屬性皆屬於實驗階段。</p>
<h2 id="語法">語法</h2>
<pre class="brush:js notranslate">/* Simple usage */
attr(data-count);
attr(title);
/* With type */
attr(src url);
attr(data-count number);
attr(data-width px);
/* With fallback */
attr(data-count number, 0);
attr(src url, '');
attr(data-width px, inherit);
attr(data-something, 'default');
</pre>
<h3 id="值">值</h3>
<dl>
<dt><code>attribute-name</code></dt>
<dd>在 CSS 中參考之 HTML 元素的屬性名稱。</dd>
<dt><code><type-</code>or-unit> {{experimental_inline}}</dt>
<dd>Is a keyword representing either the type of the attribute's value, or its unit, as in HTML some attributes have implicit units. If the use of <code><type-or-unit></code> as a value for the given attribute is invalid, the <code>attr()</code> expression will be invalid too. If omitted, it defaults to <code>string</code>. The list of valid values are:
<table class="standard-table">
<thead>
<tr>
<th scope="col">Keyword</th>
<th scope="col">Associated type</th>
<th scope="col">Comment</th>
<th scope="col">Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>string</code></td>
<td>{{cssxref("<string>")}}</td>
<td>The attribute value is treated as a CSS {{cssxref("<string>")}}. It is NOT reparsed, and in particular the characters are used as-is instead of CSS escapes being turned into different characters.</td>
<td>An empty string</td>
</tr>
<tr>
<td><code>color</code> {{experimental_inline}}</td>
<td>{{cssxref("<color>")}}</td>
<td>The attribute value is parsed as a hash (3- or 6-value hash) or a keyword. It must be a valid CSS {{cssxref("<string>")}} value.<br>
Leading and trailing spaces are stripped.</td>
<td><code>currentColor</code></td>
</tr>
<tr>
<td><code>url</code> {{experimental_inline}}</td>
<td>{{cssxref("<uri>")}}</td>
<td>The attribute value is parsed as a string that is used inside a CSS <code>url()</code>function.<br>
Relative URL are resolved relatively to the original document, not relatively to the style sheet.<br>
Leading and trailing spaces are stripped.</td>
<td>The url <code>about:invalid</code> that points to a non-existent document with a generic error condition.</td>
</tr>
<tr>
<td><code>integer</code> {{experimental_inline}}</td>
<td>{{cssxref("<integer>")}}</td>
<td>The attribute value is parsed as a CSS {{cssxref("<integer>")}}. If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used.<br>
Leading and trailing spaces are stripped.</td>
<td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td>
</tr>
<tr>
<td><code>number</code> {{experimental_inline}}</td>
<td>{{cssxref("<number>")}}</td>
<td>The attribute value is parsed as a CSS {{cssxref("<number>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
Leading and trailing spaces are stripped.</td>
<td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td>
</tr>
<tr>
<td><code>length</code> {{experimental_inline}}</td>
<td>{{cssxref("<length>")}}</td>
<td>The attribute value is parsed as a CSS {{cssxref("<length>")}} dimension, that is including the unit (e.g. <code>12.5em</code>). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used.<br>
If the given unit is a relative length, <code>attr()</code>computes it to an absolute length.<br>
Leading and trailing spaces are stripped.</td>
<td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td>
</tr>
<tr>
<td><code>em</code>, <code>ex</code>, <code>px</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, <code>mm</code>, <code>cm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code> {{experimental_inline}}</td>
<td>{{cssxref("<length>")}}</td>
<td>The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("<length>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
If the given unit is a relative length, <code>attr()</code>computes it to an absolute length.<br>
Leading and trailing spaces are stripped.</td>
<td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td>
</tr>
<tr>
<td><code>angle</code> {{experimental_inline}}</td>
<td>{{cssxref("<angle>")}}</td>
<td>The attribute value is parsed as a CSS {{cssxref("<angle>")}} dimension, that is including the unit (e.g. <code>30.5deg</code>). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used.<br>
Leading and trailing spaces are stripped.</td>
<td><code>0deg</code>, or, if <code>0deg</code> is not a valid value for the property, the property's minimum value.</td>
</tr>
<tr>
<td><code>deg</code>, <code>grad</code>, <code>rad</code> {{experimental_inline}}</td>
<td>{{cssxref("<angle>")}}</td>
<td>The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as an {{cssxref("<angle>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
Leading and trailing spaces are stripped.</td>
<td><code>0deg</code>, or, if <code>0deg</code> is not a valid value for the property, the property's minimum value.</td>
</tr>
<tr>
<td><code>time</code> {{experimental_inline}}</td>
<td>{{cssxref("<time>")}}</td>
<td>The attribute value is parsed as a CSS {{cssxref("<time>")}} dimension, that is including the unit (e.g. <code>30.5ms</code>). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used.<br>
Leading and trailing spaces are stripped.</td>
<td><code>0s</code>, or, if <code>0s</code> is not a valid value for the property, the property's minimum value.</td>
</tr>
<tr>
<td><code>s</code>, <code>ms</code> {{experimental_inline}}</td>
<td>{{cssxref("<time>")}}</td>
<td>The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as an{{cssxref("<time>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
Leading and trailing spaces are stripped.</td>
<td><code>0s</code>, or, if <code>0s</code> is not a valid value for the property, the property's minimum value.</td>
</tr>
<tr>
<td><code>frequency</code> {{experimental_inline}}</td>
<td>{{cssxref("<frequency>")}}</td>
<td>The attribute value is parsed as a CSS {{cssxref("<frequency>")}} dimension, that is including the unit (e.g. <code>30.5kHz</code>). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.</td>
<td><code>0Hz</code>, or, if <code>0Hz</code> is not a valid value for the property, the property's minimum value.</td>
</tr>
<tr>
<td><code>Hz</code>, <code>kHz</code> {{experimental_inline}}</td>
<td>{{cssxref("<frequency>")}}</td>
<td>The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("<frequency>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
Leading and trailing spaces are stripped.</td>
<td><code>0Hz</code>, or, if <code>0Hz</code> is not a valid value for the property, the property's minimum value.</td>
</tr>
<tr>
<td><code>%</code> {{experimental_inline}}</td>
<td>{{cssxref("<percentage>")}}</td>
<td>The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("<percentage>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
If the given value is used as a length, <code>attr()</code>computes it to an absolute length.<br>
Leading and trailing spaces are stripped.</td>
<td><code>0%</code>, or, if <code>0%</code> is not a valid value for the property, the property's minimum value.</td>
</tr>
</tbody>
</table>
</dd>
<dt><code><fallback></code> {{experimental_inline}}</dt>
<dd>The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where <code>attr()</code> is used, even if it is not used, and must not contain another <code>attr()</code> expression. If <code>attr()</code> is not the sole component value of a property, its <code><fallback></code> value must be of the type defined by <code><type-or-unit></code>. If not set, CSS will use the default value defined for each <code><type-or-unit></code>.</dd>
</dl>
<h3 id="形式語法">形式語法</h3>
<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<h2 id="範例">範例</h2>
<pre class="brush: css notranslate">p::before {
content: attr(data-foo) " ";
}
</pre>
<pre class="brush: html notranslate"><p data-foo="hello">world</p>
</pre>
<h3 id="結果">結果</h3>
<p>{{EmbedLiveSample("Examples", '100%', '80')}}</p>
<h2 id="規範">規範</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">規範</th>
<th scope="col">狀態</th>
<th scope="col">註解</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Values', '#attr-notation', 'attr()')}}</td>
<td>{{Spec2('CSS3 Values')}}</td>
<td>Added two optional parameters; can be used on all properties; may return other values than {{cssxref("<string>")}}. These changes are experimental and may be dropped during the CR phase if browser support is too small.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'generate.html#x18', 'attr()')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Limited to the {{cssxref("content")}} property; always return a {{cssxref("<string>")}}.</td>
</tr>
</tbody>
</table>
<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
<p>{{Compat("css.types.attr")}}</p>