JS简单实例之背景颜色变换

最新推荐文章于 2023-09-02 09:08:38 发布

Xiao_Tommy

最新推荐文章于 2023-09-02 09:08:38 发布

阅读量5.3k

点赞数 1

分类专栏： IT--前端文章标签： JS基础

本文链接：https://blog.csdn.net/xiao_tommy/article/details/53183699

版权

IT--前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本实例是利用JS的基本概念，实现点击div进行颜色变换和大小变换的实例。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

<style>
	.test1{
		height: 300px;
		width: 300px;
		background: red;
		border: 1px solid black;
	}

	.test2{
		height: 300px;
		width: 300px;
		background: green;
		border: 1px solid black;
	}
</style>

<script>

	//获取当前style属性，省的在45行中加入长串的字符
	function getstyle(obj , attr){
		return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr];//通过三木运算符来获取当前style的属性
	}

	function t(){
		var div = document.getElementsByTagName('div')[0];
		if (div.className.indexOf('test1') >= 0) { //如果test1.存在  
			div.className = 'test2';//相互转换，indexOf 返回字符串中第一次出现字符的位置，返回值为int，该表示为如果存在test1
		}else{
				div.className = 'test1';
			} 
			div.style.width = parseInt(getstyle(div, 'width'))+5+'px';
			div.style.height = parseInt(getstyle(div, 'height'))+5+'px';//parseInt>>>把300px转换成300的函数
			div.style.borderBottomWidth = parseInt(getstyle(div, 'borderBottomWidth'))+1+'px'; //当碰到border-bottom时，不可以使用’-‘，应该去掉。首字母大写
	}

</script>

</head>

<body>
	<div class="test1" οnclick="t();" >
		点击DIV，背景色交替变换
		宽高增加5px；
		下边框增粗1px；
	</div>
	
</body>
</html>