js和jquery动态修改`::after`和`::before`伪元素`content`值

最新推荐文章于 2023-06-26 15:59:39 发布

无名氏*

最新推荐文章于 2023-06-26 15:59:39 发布

阅读量1.6k

点赞数 1

本文链接：https://blog.csdn.net/qq_44848423/article/details/113958026

版权

js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js动态修改:after:before伪元素content值</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			body{
				padding: 0;
				margin: 0;
			}
			#box{
				width: 200px;
			    height: 200px;
			    position: fixed;
			    top: calc(50% - 100px);
			    left: calc(50% - 100px);
			    background: #0877FF;
			    border-radius: 10px;
			    text-align: center;
			    box-shadow: 1px 2px 3px -1px;
			}
			#box:after{
				content: attr(data-content-after);
			    position: relative;
			    top: -120px;
			    left: -160px;
			    width: 104px;
			    height: 100px;
			    line-height: 100px;
			    text-align: center;
			    border-radius: 10px;
			    background: orange;
			    box-shadow: 1px 2px 3px -1px;
			    display: block;
			}
			#box:before{
				content: attr(data-content-before);
			    position: relative;
			    top: 0;
			    right: -260px;
			    width: 104px;
			    height: 100px;
			    line-height: 100px;
			    text-align: center;
			    border-radius: 10px;
			    background: #39c778;
			    box-shadow: 1px 2px 3px -1px;
			    display: block;
			}
		</style>
	</head>
	<body>
		<div id="box" data-content-before=":before" data-content-after=":after">box盒子</div>
		
		<script type="text/javascript">
			//js用法
			var box = document.getElementById('box');
			
			var boxBeforeVal = box.attributes[1].value;
			var boxAfterVal = box.attributes[2].value;
			
			//console.log(boxBefore);//输出为   :before
			//console.log(boxAfter);//输出为  :after
			
			//下面可以自定义boxBeforeVal和boxAfterVal的值
			box.attributes[1].value = ':before伪元素';
			box.attributes[2].value = ':after伪元素';
		</script>
	</body>
</html>

jquery

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jquery动态修改伪类:after:before</title>
    	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			body{
				padding: 0;
				margin: 0;
			}
			#box{
				width: 200px;
			    height: 200px;
			    position: fixed;
			    top: calc(50% - 100px);
			    left: calc(50% - 100px);
			    background: #0877FF;
			    border-radius: 10px;
			    text-align: center;
			    box-shadow: 1px 2px 3px -1px;
			}
			#box:after{
				content: attr(data-content-after);
			    position: relative;
			    top: -120px;
			    left: -160px;
			    width: 104px;
			    height: 100px;
			    line-height: 100px;
			    text-align: center;
			    border-radius: 10px;
			    background: orange;
			    box-shadow: 1px 2px 3px -1px;
			    display: block;
			}
			#box:before{
				content: attr(data-content-before);
			    position: relative;
			    top: 0;
			    right: -260px;
			    width: 104px;
			    height: 100px;
			    line-height: 100px;
			    text-align: center;
			    border-radius: 10px;
			    background: #39c778;
			    box-shadow: 1px 2px 3px -1px;
			    display: block;
			}
		</style>
	</head>
	<body>
		<div id="box" data-content-before=":before" data-content-after=":after">box盒子</div>
		
		<script type="text/javascript">
			//jquery直接用attr方法替换，简单粗暴；
			$('#box').attr("data-content-before",':before伪元素');
			$('#box').attr("data-content-after",':after伪元素');
		</script>
	</body>
</html>

无名氏*

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js和jquery动态修改`::after`和`::before`伪元素`content`值

js<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>js动态修改:after:before伪元素content值</title> <style> *{ padding: 0; margin: 0; } body{ padding: 0; margin: 0; } #box{.
复制链接

扫一扫