JavaScript学习笔记20

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量58 收藏
点赞数
分类专栏： javaScript学习笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38720471/article/details/109207252
版权

DOM操作CSS
1.第一种方式

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>DOM操作CSS</title>
	<style style="text/css">
		li{
			font-size:2px;
			color:#ffffff;
			background-color:gray;
			border-radius:5px;
			height:33px;
			width:100px;
			text-align:center;
			line-height:38px;
			list-style:none;
			float:left;
			margin-right:10px;
		}
	</style>
	<script type="text/javascript">
		function changeA(obj){
			obj.style.color="yellow";
			obj.style.fontSize="16px";
			obj.style.backgroundColor="red";
			
		}
		function changeB(obj){
			obj.style.color="white";
			obj.style.fontSize="12px";
			obj.style.backgroundColor="gray";
		}
	</script>
</head>
<body>
	<ul>
		<li onmouseover="changeA(this)" onmouseout="changeB(this)">前端</li>
		<li onmouseover="changeA(this)" onmouseout="changeB(this)">后端</li>
		<li onmouseover="changeA(this)" onmouseout="changeB(this)" >数据库</li>
	</ul>
</body>
</html>

直接通过在按钮上添加事件，调用函数，实现效果。
注意函数参数问题，如调用时：changeA(this), 定义时：changeA(obj)

2.第二种方式

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>DOM操作CSS</title>
	<style style="text/css">
		li{
			font-size:2px;
			color:#ffffff;
			background-color:gray;
			border-radius:5px;
			height:33px;
			width:100px;
			text-align:center;
			line-height:38px;
			list-style:none;
			float:left;
			margin-right:10px;
		}
	</style>
	<script type="text/javascript">
		//页面加载完后，给所有li动态绑定over和out事件
			window.onload=function(){
			//获取所有li
			var liArr=document.getElementsByTagName("li");
			for(var i=0;i<liArr.length;i++){
				liArr[i].onmouseover=function(){
					this.style.color="yellow";
					this.style.fontSize="16px";
					this.style.backgroundColor="red";
				}
				liArr[i].onmouseout=function(){
					this.style.color="white";
					this.style.fontSize="12px";
					this.style.backgroundColor="gray";
				}
			}
		}
	</script>
</head>
<body>
	<ul>
		<li>前端</li>
		<li>后端</li>
		<li>数据库</li>
	</ul>
</body>
</html>

通过js技术动态绑定事件，这样不用每个标签都写一次。

第三种方式

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>DOM操作CSS</title>
	<style style="text/css">
		li{
			font-size:2px;
			color:#ffffff;
			background-color:gray;
			border-radius:5px;
			height:33px;
			width:100px;
			text-align:center;
			line-height:38px;
			list-style:none;
			float:left;
			margin-right:10px;
		}
		.over{
			color:yellow;
			font-size:16px;
			background-color:red;
		}
		.out{
			color:white;
			font-size:12px;
			background-color:gray;
		}
	</style>
	<script type="text/javascript">
		//页面加载完后，给所有li动态绑定over和out事件
			window.onload=function(){
			//获取所有li
			var liArr=document.getElementsByTagName("li");
			for(var i=0;i<liArr.length;i++){
				liArr[i].onmouseover=function(){
					//this.class="over";// 不是class 而是className
					this.className="over";
				}
				liArr[i].onmouseout=function(){
					this.className="out";
				}
			}
		}
	</script>
</head>
<body>
	<ul>
		<li >前端</li>
		<li>后端</li>
		<li>数据库</li>
	</ul>
</body>
</html>

不仅动态绑定事件，定义样式，改变样式都采用类定义的方法，这样可以增加代码的重用性。

注意点：
js中的样式定义：

					//对象调用时
					this.style.color="yellow";
					this.style.fontSize="16px";
					this.style.backgroundColor="red";

					//在标签中设置时
					<div style="height:50px;width:50px;position:fixed;">

css中的样式定义：

			font-size:2px;
			color:#ffffff;
			background-color:gray;
			border-radius:5px;
			height:33px;
			width:100px;
			text-align:center;
			line-height:38px;
			list-style:none;
			float:left;
			margin-right:10px;
逆流！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript学习笔记1
jaysonhu的博客
06-09 306
《JavaScript高级程序设计》学习笔记一（1~3章）#
JavaScript学习笔记4
jaysonhu的博客
06-22 350
变量包含两种不同数据类型的值 基本类型值(undefined,null,boolean,number,string) 引用类型值(object) 例 obj1,obj2 引用了同一个对象 //访问变量有按值和按引用两种方式 var obj1 = new Object(); var obj2 = obj1;function setName(obj){ //参数只能按值
Javascript入门学习笔记
weixin_61370021的博客
04-27 4592
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
JavaScript学习笔记
qq_53388077的博客
03-30 1527
JavaScript是一门跨平台、面向对象的脚本语言，是用来控制网页行为的。脚本语言通常直接解释执行，不需要编译，缩短了传统编程语言的运行过程/*定义格式：var 对象名={属性名1：属性值1，属性名2：属性值2，属性名3：属性值3，函数名称：function(形参列表){}*/var user={age:20,alert("用膳");//简化方法：eat(){alert("用膳");
javascript学习笔记
11-24
学习JavaScript时，了解这些基础知识是至关重要的。随着深入学习，你将接触到更高级的概念，如闭包、异步编程（回调函数、Promise、async/await）、模块系统以及现代框架如React、Vue和Angular的使用。JavaScript的...
Ruffy javascript 学习笔记
10-29
Ruffy javascript 学习笔记
JavaScript 学习笔记（十一）
10-29
继续学习的是document对象。
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 345
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue2 实现原生 WebSocket
weixin_38797742的博客
07-11 376
原生WebSocket： new WebSocket。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 169
vue 自定义滚动条同步拖动（移动端）
Webkit简介以及工作流程
读心悦
07-10 332
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
在项目中，如何使用springboot+vue+springsecurity+redis缓存+Axios+MySQL数据库+mybatis
huanghm88的专栏
07-11 692
在Spring Boot中，可以使用Spring Data JPA和MyBatis来配置MySQL数据库。在Vue项目中，可以创建一个config.js文件来配置后端的API地址，然后在需要发送请求的地方使用Axios发送请求。根据业务需求，在Spring Boot中编写相应的接口和服务层代码，包括数据访问、业务逻辑等。在Vue中，可以使用Axios发送HTTP请求，并将响应的数据展示在前端页面上。分别启动后端的Spring Boot应用和前端的Vue应用，访问前端页面，就可以看到与后端进行通信的效果。
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 317
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 204
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
Vue3 使用 Vue Router 时，prams 传参失效和报错问题
专注基础架构领域
07-12 483
我尝试使用 prams 传递数据当我跳转页面时,得到的 prams 数据为空 ,控制台也出现了 Vue Router 的警告点开链接后发现了原因,。也就是说，从Vue Router的2022-8-22 这次更新后，我们使用上面的方式在新页面无法获取：vue也给我们提出了解决方案：使用 query 的方式传参只要改成query 传参就好了,注意query传参只能用路由表中的 path ,不是 name ,并且所有参数都会显示在URL 地址上。将参数放在 pinia 或 vuex仓库里。
TS类型声明文件（二）如何在 TS 中导入导出局部类型
weixin_43303603的博客
07-10 262
系列文章之：如何在 TypeScript 中导入导出局部类型
js中scrollIntoView第一次不生效，第二次生效
风如也的博客
07-12 165
方法用于将元素滚动到可视区域。如果在页面加载后立即使用，可能不会生效，因为页面可能还没有完全渲染或者加载完成。如果是因为元素还没有完全渲染完成，可以在。关键是确保在页面完全加载和渲染之后再调用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值