css中通过attr函数获取html标签的属性值


字数:266 阅读时长:1分钟 阅读:85

最近做文本标注的项目,其中有个排序标记的需求,需要使用 js 动态修改元素的伪元素 beforeaftercontent 的内容。

CSS3 attr函数

代码展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<template>
<div class="list">
<div v-for="(item, index) in list" :key="item.id" :data-index="index" class="item"></div>
</div>
</template>
<script setup lang="ts">
let list = [
{
id: 1,
text: "山重水复疑无路"
},
{
id: 2,
text: "柳暗花明又一村"
},
]
</script>

<style lang="scss">
.item {
position: relative;
border: 1px solid red;
font-size: 20px;

&:before {
content: attr(data-index);
position: absolute;
top: -10px;
display: inline-block;
color: pink;
}
}
</style>

css attr函数

  • 这里的关键就是css的 attr 函数可以获取到对应html标签的属性。从而可以通过改变数据来修改元素的伪元素 beforeaftercontent 的内容。
  • 当然也可以通过js操作DOM属性的形式去动态修改。
1
itemEle.setAttribute("data-index","100")

欢迎访问:天问博客

本文作者: Tiven
发布时间: 2023-03-03
最后更新: 2023-07-17
本文标题: css中通过attr函数获取html标签的属性值
本文链接: https://www.tiven.cn/p/d9feb356/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^
个人邮箱: tw.email@qq.com
notification icon
博客有更新,将会发送通知给您!