CSSattr函数及其应用

发布时间：2023-05-18

在CSS中，属性选择器可以根据HTML元素的属性值来选择元素。然而，有时候我们需要的属性不是HTML元素本身拥有的，而是通过JavaScript或者其他方式添加的。这时候我们就需要用到CSS attr() 函数。

一、CSS attr() 函数的基本使用

CSS attr() 函数可以用来获取HTML元素的属性值，并使用该值作为样式的属性值。 它的基本语法如下：

selector {
   property: attr(attributeName);
}

其中 selector 是需要应用该样式的元素，property 是需要设置的CSS属性，attributeName 是需要获取的HTML元素的属性名称。 比如，我们可以通过下面的代码实现：元素的高度为它的 data-height 属性值的一半。

div {
   height: calc(attr(data-height) / 2);
}

二、CSS attr() 函数的高级用法

1. 使用CSS attr() 函数设置默认值

CSS attr() 函数还支持设置默认值。当获取的HTML元素没有指定该属性时，可以使用设置的默认值。 它的语法如下：

selector {
   property: attr(attributeName, defaultValue);
}

其中 defaultValue 是设置的默认值。 比如，当获取的HTML元素没有指定 data-height 时，我们可以将获取到的值设为 0，代码如下：

div {
   height: calc(attr(data-height, 0) / 2);
}

2. 使用CSS attr() 函数设置带单位的属性值

CSS attr() 函数还支持设置带单位的属性值。如果属性值带有单位，需要使用 calc() 函数。 它的语法如下：

selector {
   property: calc(attr(attributeName) unit);
}

其中 unit 是需要设置的单位。 比如，我们需要将获取到的 data-width 属性值加上 10px 作为元素的宽度，代码如下：

div {
   width: calc(attr(data-width) + 10px);
}

三、常见应用场景

1. 自定义样式

CSS attr() 函数可以方便我们自定义样式，假设我们需要设置不同颜色的文字，但是每个颜色对应的 class 名字都不同，这时候我们可以通过 data-color 属性来设置颜色值。

.red {
   color: red;
}
.green {
   color: green;
}
.blue {
   color: blue;
}
span {
   color: attr(data-color);
}

接下来，我们可以通过 data-color 属性来设置 span 元素的颜色值：

<span data-color="red">这是红色文字</span>
<span data-color="green">这是绿色文字</span>
<span data-color="blue">这是蓝色文字</span>

2. 自适应布局

CSS attr() 函数也可以用于自适应布局，假设我们需要创建一个正方形的元素，但是元素的大小是通过JavaScript设置的，这时我们可以借助CSS attr() 函数来实现正方形的效果。

.square {
   width: attr(data-size);
   height: attr(data-size);
}

接下来，我们可以通过设置 data-size 属性来实现元素的自适应布局：

<div class="square" data-size="200px"></div>
<div class="square" data-size="300px"></div>
<div class="square" data-size="400px"></div>

3. 自定义 background-image

CSS attr() 函数还可以用来自定义 background-image。比如，我们需要根据 data-src 属性设置元素的背景图片，代码如下：

.bg-img {
   background-image: url(attr(data-src));
   background-repeat: no-repeat;
   background-size: cover;
}

接下来，我们可以通过设置 data-src 属性来实现不同背景图片的效果：

<div class="bg-img" data-src="image1.jpg"></div>
<div class="bg-img" data-src="image2.jpg"></div>
<div class="bg-img" data-src="image3.jpg"></div>

结语

CSS attr() 函数给我们提供了很多的便利，帮助我们更加灵活地控制元素的样式。通过合理地应用该函数，可以大大提高我们的开发效率。

推荐文章