CSS attr() 函数获取变量的方法

帖子详情

CSS attr() 函数可以像JS一样获取变量了，这个对于前端开发是非常方便的事情。例如我们可以使用CSS attr() 函数来获取当前超链接的链接地址。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>学做网站论坛</title>

<style>

a:after {content: " (" attr(href) ")";}

</style>

</head>



<body>

<p><a href="https://www.xuewangzhan.net/">学做网站论坛</a></p>

<p><a href="https://www.xuewangzhan.net/">HTML 教程</a></p>



<p><strong>注意:</strong> IE8 需要声明 !DOCTYPE 才可以支持 attr() 函数。</p>

</body>

</html>

除了获取href的值之外，我们还可以使用CSS attr() 函数来获取data的传值。

<h3><a href="index14.html"><span data-title="关于我们">关于我们</span></a></h3>

<style>content: attr(data-title);</style>

以上就是CSS attr() 函数二种常用的应用。

版权：言论仅代表个人观点，不代表官方立场。转载请注明出处：https://www.52diyhome.com/forum/299270.html