编程技术文章分享与教程

网站首页 > 技术文章 正文

CSS属性值函数(6)attr()取元素属性值

hmc789 2024-11-14 16:34:14 技术文章 2 ℃

CSS函数attr() 用来获取选择器所指元素的某一 HTML 属性值，并用于其样式中。它也可以用于伪元素，属性值采用伪元素所依附的元素。比如::before，::after伪元素的content属性（建议当前阶段仅用于此属性）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS属性值函数attr()</title>
		<style>
      blockquote {
        margin: 1em 0;
      }
      blockquote::after {
        display: block;
        content: ' (source: ' attr(cite) ') ';  // 获取cite属性值并用在content属性里
        color: hotpink;
      }
    </style>
</head>
<body>
    <blockquote cite="https://mozilla.org/en-US/about/">
      Mozilla makes browsers, apps, code and tools that put people before profit.
    </blockquote>
    <blockquote cite="https://web.dev/about/">
      Google believes in an open, accessible, private, and secure web.
    </blockquote>
</body>
</html>

以上代码的效果如下：

这样就可以把元素得属性值显示在页面中了。

基本语法

// 整体语法格式
<attr()> = attr( <attr-name> <attr-type>? , <declaration-value>? )  

// 属性名(不用引号包裹)
<attr-name> = [ <ident-token> '|' ]? <ident-token>  

// 取值的类型或单位- 实验性的
<attr-type> = string | ident | color | url | number | percentage | length | angle | time |
  frequency | flex | <dimension-unit> 
/* 简单用法 */
attr(data-count);
attr(title);

/* 结合type类型使用 【实验性的】 */
attr(src url);
attr(data-count number);
attr(data-width px);

/* 结合备选值使用 【实验性的】 */
attr(data-count number, 0);
attr(src url, "");
attr(data-width px, inherit); // 此处用的是尺寸单位px
attr(data-something, "default");


示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS属性值函数attr()</title>
		<style>
      [data-foo]::before {
        content: attr(data-foo) " ";
      }
    </style>
</head>
<body>
    <p data-foo="hello">world</p>
</body>
</html>

以上代码页面中有个段落元素，其属性data-foo的值为hello，CSS样式为它定义了一个伪元素::before，其内容为段落属性data-foo的值。其渲染结果大家可以脑中想象一下。

最佳实践

  • 函数可用于所有CSS属性，但除伪元素的content属性外的使用都是实验性的；
  • 取值类型和单位的设置，在大部分浏览器中还不支持；
  • 备选值的设置，在大部分浏览器中还不支持；
  • 虽然多数用法是实验性的，但基础用法却很早得到浏览器广泛支持。

好了，取元素属性值的函数：attr() 就介绍到这儿了，赶紧动手试试吧！

更多精通CSS的相关精彩文章制作中，敬请期待。欢迎点赞、收藏和转发！

“属性值函数”系列文章：

CSS属性值函数（1）概述及语法

CSS属性值函数（2）calc()数值计算

CSS属性值函数（3）clamp()限值函数

CSS属性值函数（4）极值函数min()、max()

CSS属性值函数（5）round()取整函数

Tags：

猜你喜欢

标签列表
最新留言