JavaScript.05.操作css

最新推荐文章于 2023-05-10 01:09:09 发布

Champion_me

最新推荐文章于 2023-05-10 01:09:09 发布

阅读量217

点赞数 8

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/Champion_me/article/details/123278141

版权

一、常见样式

在这里插入图片描述

二、style对象的常用属性

在这里插入图片描述

三、JavaScript中常用的事件列表

在这里插入图片描述

四、获取行内样式和获取类样式的方法

在这里插入图片描述

五、scrollTop、scrollLeft属性

在这里插入图片描述

六、操作css的两种方式

1.直接操作style
2.操作class

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.a{
				border: 10px solid green;
				box-shadow: 0px 0px 10px yellow;
			}
		</style>
	</head>
	<body>
		<img id="m1" src="img/1.gif" >
		<img id="m2" src="img/2.gif" >
		<img id="m3" src="img/3.gif" >
		<p>
			<button onclick="fn1()">点我添加边框</button>
			<button onclick="fn2()">点我添加边框</button>
			<button onclick="fn3()">点我添加边框</button>
		</p>
		<script>
			function fn1(){
				//操作css的第一种方式		直接操作style
				m1.style.border="5px solid black"
				m1.style.width="50px"
				m1.style.opacity=.5
			}
				
				//第二种方式		操作class
			function fn2(){
				m2.setAttribute("class","a")
			}
			
			function fn3(){
				//这种事第二种方式的简写
				//class 是关键字
				//标签中的class属性在js中都叫做className
				m3.className="a"
			}
			
		</script>
	</body>
</html>

七、JavaScript操作css案例(滑动广告)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				border: 2px solid black;
				/* 绝对布局的特点：可以随便调整位置 */
				position: absolute;
				/*top  bottom  left  right*/
				right: 20px;
				top: 40px;
				transition: .1s;
			}
		</style>
	</head>
	<body>
		<div id="ad">
			<button onclick="ad.style.display='none'">X</button>
			<br>
			<img src="./img/1.gif" >
		</div>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<p>淘宝，淘你所爱</p>
		<script>
			//窗口的滑动事件
			window.onscroll=()=>{
				//获取窗口滚动的距离
				ad.style.top=40+document.documentElement.scrollTop+"px"
			}
		</script>
	</body>
</html>

八、类似放大镜的案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="div"></div>
		<script>
			//onclick 点击事件
			//ondblclick 点击事件
			//onmouseover 鼠标移入事件
			//onmouseout 鼠标移出事件
			//onmousemove 鼠标移动事件
			
			window.onmousemove=(e)=>{
				//需要事件对象  Event
				div.style.left=e.clientX+"px"
				div.style.top=e.clientY+"px"
				
			}
			
		</script>
	</body>
</html>