JavaScript 如何使用JS操作CSS

家人们，新的一天新的知识点，我们要开启新的课程啦，今天带大家学习如何使用JS操作css，大家有不懂得可以私信我，或者在下方评论噢，现在就让我带你们进入知识的海洋中。一.什么是css？Cascading Style Sheets 通常称为CSS样式表或层叠样式表（级联样式表）CSS用于控制网页的外观(HTML是用于控制网页结构的,JS是控制网页的行为)Css让界面变得更加美观二.如何使用JS操作CS

客行.

12916人浏览 · 2022-03-04 18:03:01

客行. · 2022-03-04 18:03:01 发布

家人们，新的一天新的知识点，我们要开启新的课程啦，今天带大家学习如何使用JS操作css，大家有不懂得可以私信我，或者在下方评论噢，现在就让我带你们进入知识的海洋中。

一.什么是css？

Cascading Style Sheets 通常称为CSS样式表或层叠样式表（级联样式表）
CSS用于控制网页的外观 (HTML是用于控制网页结构的,JS是控制网页的行为)
Css让界面变得更加美观

二.如何使用JS操作CSS

1.直接操作style(样式)

语法：元素.style.样式名 = 样式值;

注意：

如果CSS的样式名中含有-，这种名称在JS中是不合法的。
比如background-color需要将这种样式名修改为驼峰命名法。
去掉-，将-后的首字母大写格式 : backgroundColor

题目：操作style给图片设置边框

我们通过做题目来了解如何操作style,给大家上代码，代码都有详细备注

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<img id="m1" src="img/1.gif">
		
		<br>
		<button onclick="fn1()">点我添加边框</button>
		
	 
	<script>
	  function fn1(){
		  // 操作css的第一种方法:直接操作style属性
		  // 给他设置一个边框
		  m1.style.border="5px solid black";
		  //使他变小width
		  m1.style.width="40px";
		  // 透明度
		  m1.style.opacity=.5;
	  }
	  
	 
	</script>
	</body>
	
	
</html>

2.操作class属性

题目:操作class属性设置边框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		/* class名 */
		.a{
			/* 边框大小 solid:实线  green:给边框设置颜色 */
			border: 10px solid green;
			box-shadow: 0px 0px 10px yellow;
		}
		
		</style>
		
	</head>
	<body>
		
		<img id="m2" src="img/2.gif">
		<img id="m3" src="img/3.gif">
		<br>
	
		<button onclick="fn2()">点我添加边框</button>
		<button onclick="fn3()">点我添加边框</button>
	 
	<script>

	  // 设置属性
	  function fn2(){
		  // setAttribute设置标签中的属性
		 // 设置该标签的class属性名为a class="a";
		  // 我们就可以具备了a里面的样式
		  m2.setAttribute("class","a");
	  }
	  
	  // 操作class属性
	  function fn3(){
		  // class是关键字
		  // 标签中的class属性在js中叫做className;
		  m3.className="a";
	  }
	</script>
	</body>
	
	
</html>

三.代码实操

题目一：完成一个类似广告的功能，广告跟着我们的滚动条移动

思路：1.我们要拿到滚动条移动的距离

2.广告跟着滚动条移动这里只需要沿着Y轴运动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
		  border:2px solid black;
		  /*绝对布局的特点：可以随便调整位置*/
		    position: absolute;
           /*top bottom left right*/
		   /* 离右边的距离为20px */
			right: 20px;
			/* 离左边的距离为40px */
	        top: 40px;
			/* 移动间隔时间，可以不设置 */
			transition: .1s; 
		}
		
		</style>
	</head>
	<div id="d1">
		<!-- 点击事件，点击时关闭广告 -->
	<span onclick='d1.style.display="none"'>x</span>
	<br>
	<img src="img/4.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>
	<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:窗口 -->
	   window.onscroll=()=>{
		//获取到窗口滚动的距离 scrollTop
		d1.style.top=40+document.documentElement.scrollTop+"px"
	   }
	</script>
	
	</body>
</html>

题目二:让一个东西跟着鼠标移动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			/* 设置大小 */
			width:180px;
			height:180px;
			background:red;
			 position: absolute;
		}
		
		</style>
	</head>
	<body>
		<div id="d1"></div>
		
		<script>
		window.onmousemove=(e)=>{
			// 拿到鼠标的x和y轴
			// 让div跟着鼠标运动
			// d1.style.left=e.clientX+"px";
			// d1.style.top=e.clientY+"px";
			
			// 如果想要我们鼠标在div的中间
			// 减去中间的大小的一半，使鼠标在div正中间
			d1.style.left=e.clientX-90+"px";
			d1.style.top=e.clientY-90+"px";
			
		}
				
		</script>
	</body>
</html>

题目三：放大镜功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			/* 设置大小 */
			width:300px;
			height:300px;
			background: red;
			position: absolute;
			 /*设置事件全部无效*/
			 /* 因为我们 */
			 pointer-events: none;
			 display:none;
			}
			</style>
	</head>
	<body>
		<img id="m1" src="img/1.gif">
		<div id="div"></div>
		
		<script>
		// 当移入到图片时显示出来
		m1.onmouseover=(e)=>{
			div.style.display="block";
		}
		
		// 当从图片移出时图片消失
		m1.onmouseout=(e)=>{
			div.style.display="none";
		}
		
		// 鼠标移动事件，当移入到图片的时候，div变成该图片
		// 只在图片上面移动
		m1.onmousemove=(e)=>{
			div.style.left=e.clientX-50+"px";
			div.style.top=e.clientY-50+"px";
			// 当他移动到我们的图片上面时，我们让div变成图片的呀样子
			// url位置的意思 来自于图片的src属性,拿到图片
			// center/cover平铺的意思
			div.style.background="url("+m1.src+")  center/cover";
		}
		
		</script>
	</body>
</html>