使用JS操作CSS

一.什么是css?

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

二.如何使用JS操作CSS

   1.直接操作style(样式)

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

注意:

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

功能实现:通过操作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>

以上就是本文的全部内容,感谢您的阅读。

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

萝卜头不吃萝卜头

您的鼓励将是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值