JavaScript 如何使用JS操作CSS_js css-程序员宅基地

技术标签: css  html  javascript  

 家人们,新的一天新的知识点,我们要开启新的课程啦,今天带大家学习如何使用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>

  

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_65725031/article/details/123279302

智能推荐

MySQL8.0以上授权远程连接时,必须创建新用户_mysql8一定要建用户组吗-程序员宅基地

文章浏览阅读214次。#进入mysqlmysql –uroot -p#给指定ip赋权限GRANT ALL PRIVILEGES ON *.* TO 'ldq'@'172.69.7.251' WITH GRANT OPTION;#修改密码ALTER USER 'ldq'@'172.69.7.251' IDENTIFIED WITH mysql_native_password BY 'ldq2021';flush privileges;exit;MySQL8在实现远程连接(如远程phpmyadmin访问数据库服务器_mysql8一定要建用户组吗

python3 更新和删除 elasticsearch 及其删除es索引_删除requstes-程序员宅基地

文章浏览阅读8.3k次。from elasticsearch import Elasticsearches_client = Elasticsearch(["localhost:9200"])// 多个条件限制的删除delete_options ={"query":{ "bool":{ "must":[{"te..._删除requstes

QNX 分区和文件系统制作_qnx 文件系统测试-程序员宅基地

文章浏览阅读544次。QNX 分区和文件系统制作_qnx 文件系统测试

《七天数据可视化之旅》第一天 数据可视化过程-程序员宅基地

文章浏览阅读236次。《七天数据可视化之旅》第一天 数据可视化过程Destiny,某物流公司数据产品经理,目前从事数据平台搭建和可视化相关的工作。持续学习中,期望与大家多多交流数据相关的技术和实际应用,共同成长。0x00 前言之前写过一篇文章,叫做数据可视化的基本流程,是站在可视化过程中的上下游关系,来梳理和介绍数据可视化的全过程,及其各个环节的主要工作内容。今天这篇文章,也是介绍数据可视化的过程,但是更多的是站在产品..._可视化工具的一天

Transformer:注意力机制(attention)和自注意力机制(self-attention)的学习总结_注意力机制和自注意力机制-程序员宅基地

文章浏览阅读4.1w次,点赞323次,收藏1.2k次。本文主要分为两个部分:第一部分重点介绍了注意力机制的原理、公式演变、评分函数以及多头注意力。第二部分重点介绍了自注意力机制的原理、优缺点以及和注意力机制的区别,并最后给出了单头和多头自注意力机制的图片示例。_注意力机制和自注意力机制

LeetCode简单题分享(8)-程序员宅基地

文章浏览阅读1.4w次。题目:这道题求动态和,最先考虑到的就是就是一个遍历累加的状态,仔细分析发现,其实新的数组只需要前面的和就好了,没必要多次遍历,那么这道题的思路就出来了代码如下:class Solution { public static int[] runningSum(int[] nums) { //定义长度 int length = nums.length; //初始化返回数组 int [] newNum = ne...

随便推点

Unity鼠标控制物体 拖动旋转-程序员宅基地

文章浏览阅读6.6k次。public class Script2 : MonoBehaviour{ Ray ray; RaycastHit hit; GameObject Obj; Vector3 _Obj屏幕坐标_; Vector3 _鼠标世界坐标_; Vector3 _Obj坐标差值_; float _水平旋转_; float _垂直旋转_; ...

华为手机linux连接网络设置ip地址,华为路由器(Huawei)默认登录IP地址是多少-程序员宅基地

文章浏览阅读542次。本站收集了华为路由器所有的登录地址;路由器登录地址可以登录到路由器的管理界面,然后设置路由器各项参数,如果你使用的是华为路由器,请在以下列表中找到路由器的登录地址。华为IP地址列表10.0.0.13810.0.0.210.0.20.1192.168.0.1192.168.1.1192.168.1.254192.168.100.1192.168.15.1192.168.2.1192.168.254...._华为路由器 linux 访问

IAR修改工程名方法_iar修改工程名字-程序员宅基地

文章浏览阅读1.7k次。IAR修改工程名方法_iar修改工程名字

android studio中导入一个module作为另一个module的lib_android studio 将app moudel当做另一个moudel的依赖-程序员宅基地

文章浏览阅读1w次。在我们有两个Android Studio工程的情况时,我们想使用一个作为library工程导入到另一个工程作为一个module。我们可以使用Android Studio很容易的做到。让我们假设我们有两个工程:MyApplication和MyLibrary,我们想导入MyLibrary到MyApplication作为一个module。 首先我们需要从MyLibrary工程中找到m_android studio 将app moudel当做另一个moudel的依赖

IOS 搭建 XMPP实现环境-程序员宅基地

文章浏览阅读40次。第一步:添加XMPP FrameWork For IOS需要添加的文件:第二步: 编译后发现有很多错误,那么需要添加其他扶助的类库第三步:ARC(只限没有使用ARC的项目)当所有类库都添加后,编译,我们会发现有很多黄色的警告,这..._ios xmpp 编译报错

Maven实战手册_:nm /u-程序员宅基地

文章浏览阅读321次。nm_:nm /u