学做网站培训课程介绍

当前位置:

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() 函数二种常用的应用。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注