脚本化CSS例题集

最新推荐文章于 2022-10-27 23:22:46 发布

Ena-coder

最新推荐文章于 2022-10-27 23:22:46 发布

阅读量137

点赞数

分类专栏：向前端大佬看齐

本文链接：https://blog.csdn.net/weixin_37702998/article/details/103181677

版权

向前端大佬看齐专栏收录该内容

20 篇文章 0 订阅

订阅专栏

实现点击div能改变伪类元素的颜色

<style type = "text/css">
	div{
		width:80px;
		height:80px;
		background-color:red;
	}
	.green::after{
		content:'';
		width:30px;
		height:30px;
		background-color:green;
		display:inline-block;
	}
	.yellow::after{
		content:'';
		width:30px;
		height:30px;
		background-color:yellow;
		display:inline-block;
	}
</style>
<body>
	<div class = 'green'></div>
	<script type = "text/javascript" src="test.js"></script>
</body>

在这里插入图片描述

实现点击div能改变div样式，再次点击又能变回原来样式

<style type = "text/css">
	div{
		width:80px;
		height:80px;
		background-color:red;
	}
	.active{
		width:150px;
		height:150px;
		background-color:purple;
	}
</style>
<body>
	<div></div>
	<script type = "text/javascript" src="test.js"></script>
</body>

在这里插入图片描述

实现点击小方块移动

var div = document.getElementsByTagName('div')[0];
var speed = 10;
div.onclick = function(){
	var timer = setInterval(function(){
		function getStyle(elem,prop){
			if(window.getComputedStyle(elem,null)[prop]){
				return window.getComputedStyle(elem,null)[prop];
			}else{
				elem.currentStyle[prop];
			}
		}
		speed += speed/7;
		div.style.left = parseInt(getStyle(div,'left')) + speed + 'px';
		if(parseInt(div.style.left) > 300){
			clearInterval(timer);
		}
	},10)
}

在这里插入图片描述

Ena-coder

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
脚本化CSS例题集

实现点击div能改变伪类元素的颜色<style type = "text/css"> div{ width:80px; height:80px; background-color:red; } .green::after{ content:''; width:30px; height:30px; background-color:green; ...
复制链接

扫一扫