css样式attr()获取元素属性值测试

原创于 2025-12-19 10:15:08 发布 · 195 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

web 专栏收录该内容

53 篇文章

订阅专栏

有时候，不想把样式设置太死，想灵活变化，可能会想到动态传值，这时候我们可以使用css的attr()方法，如下所示，根据传入的几个data-width我们分别设置像素px,百分比%，以及默认的百分比，和data-content作为内容填充。

代码如下：

<!doctype html>
<html>
      <head>
	      <style>
		      .root{
				 background: #ddd;
				 border-radius: attr(data-width px);
				 height: attr(data-width px);
				 width: attr(data-width px);
				 display: flex;
				 justify-content: center;
				 align-items: center;
			  }
			  .rect{
			     background: #c2ff77;
				 width: attr(data-width %);
				 --h : 50px;
				 height: var(--h);
			  }
			  .default{
			     background: #0088ff;
				 width: attr(data-width);
			  }
			  .content{
			     background: #ddd;
			  }
			  .content:before{
			     content: attr(data-content);
				 display: block;
				 color: red;
			  }
		  </style>
	  </head>
	  <body>
	       <div class="root" data-width="300" >attr(data-width px)</div>
		   
		   <div class="rect" data-width="30">attr(data-width%)</div>
		   
		   <div class="default" data-width="50%">attr(data-width)</div>
		   
		   <div class="content" data-content="before:content">before:content</div>
	  </body>
</html>

展示的效果如下所示：