web前端之CSS操作

浪漫的诗人2023-08-09 18:24

文章目录

  • 一、CSS操作
      • [1.1 html元素的style属性](#1.1 html元素的style属性)
      • [1.2 元素节点的style属性](#1.2 元素节点的style属性)
      • [1.3 cssText属性](#1.3 cssText属性)
  • 二、事件
      • [2.1 事件处理程序](#2.1 事件处理程序)
        • [2.1.1 html事件](#2.1.1 html事件)
        • [2.1.2 DOM0事件（适合单个事件）](#2.1.2 DOM0事件（适合单个事件）)
        • [2.1.3 DOM2事件（适合多个事件）](#2.1.3 DOM2事件（适合多个事件）)
      • [2.2 事件之鼠标事件](#2.2 事件之鼠标事件)
      • [2.3 事件之Event事件对象](#2.3 事件之Event事件对象)
        • [2.3.1 Event.target](#2.3.1 Event.target)
        • [2.3.2 Event.type](#2.3.2 Event.type)
        • [2.3.3 Event.preventDefault](#2.3.3 Event.preventDefault)
        • [2.3.4 Event.stopPropagation()](#2.3.4 Event.stopPropagation())
      • [2.4 事件之键盘事件](#2.4 事件之键盘事件)
      • [2.5 事件之表单事件](#2.5 事件之表单事件)
          • [2.5.1 input事件](#2.5.1 input事件)
          • [2.5.2 select事件](#2.5.2 select事件)
          • [2.5.3 change事件](#2.5.3 change事件)
          • [2.5.3 reset事件、submit事件](#2.5.3 reset事件、submit事件)
  • 三、定时器
      • [3.1 setTimeout](#3.1 setTimeout)
      • [3.1 setInterval()](#3.1 setInterval())
  • 四、防抖

一、CSS操作

1.1 html元素的style属性

使用网页元素节点的setAttribute方法直接操作网页元素的style属性。

html 复制代码 
div.setAttribute(
	'style',
	'background-color:red;'+'border:1px solid black;'
	);

1.2 元素节点的style属性

html 复制代码 
var divStyle = document.querySelector('div').style;
divstyle.backgroundColor = 'red';
divstyle.border = '1px solid black';
divstyle.width ='100px';
divstyle.height = '100px';
divstyle.fontsize = '10em'

1.3 cssText属性

html 复制代码 
var divStyle = document.querySelector('div').style;
divStyle.cssText = 'background-color: 'red;'
+ border: 1px solid black;
+ 'height: 100px;
+ 'width: 100px;';

二、事件

2.1 事件处理程序

2.1.1 html事件

缺点：html和js没有分开

html 复制代码 
<!DOCTYPE htm1>
<htm1>

	<head lang="en">
		<meta charset="UTF-8">
		<title>Js事件详解--事件处理</title>
	</head>

	<body>
		<div id="div">
			<button id="btn1" onclick="demo()">按钮</button>
		</div>
		<script>
			function demo() {alert("he11o htm]事件处理");}
		</script>
	</body>
	</htmI>

onclick为鼠标事件

2.1.2 DOM0事件（适合单个事件）

优点：html和js是分离的

html 复制代码 
<!DOCTYPE htm1>
<htm1>

	<head lang="en">
		<meta charset="UTF-8">
		<title>Js事件详解--事件处理</title>
	</head>

	<body>
		<button id="btn">按钮</button>
		<script>
			var btn=document.getElementById("btn")
			btn.onclick=function(){
				console.log("点击了");
			}

		</script>
	</body>
	</htmI>

2.1.3 DOM2事件（适合多个事件）

优点：事件不会被覆盖

html 复制代码 
<!DOCTYPE htm1>
<htm1>

	<head lang="en">
		<meta charset="UTF-8">
		<title>Js事件详解--事件处理</title>
	</head>

	<body>
		<button id="btn">按钮</button>
		<script>
			var btn=document.getElementById("btn")
			btn.addEventListener("click",function(){console.log("点击了1");})
			btn.addEventListener("click",function(){console.log("点击了2");})

		</script>
	</body>
	</htmI>

2.2 事件之鼠标事件

html 复制代码 
<!DOCTYPE htm1>
<htm1>

	<head lang="en">
		<meta charset="UTF-8">
		<title>Js事件详解--事件处理</title>
	</head>

	<body>
		<button id="btn1">鼠标事件之单击</button>
		<button id="btn2">鼠标事件之双击</button>
		<script>
			var btn=document.getElementById("btn1")
			var btn=document.getElementById("btn2")
			btn1.onclick=function(){
				console.log("单击"); 
			}
			btn2.ondblclick=function(){
				console.log("双击");
			}

		</script>
	</body>
	</htmI>

其他代码均和以上的类型相同。

2.3 事件之Event事件对象

事件发生以后，会产生一个事件对象，作为参数传给监听函数
Event对象属性

  • Event.Target
  • Event.type
    Event对象方法
  • Event.preventDefault
  • Event.stopPropagation
html 复制代码 
<!DOCTYPE htm1>
<htm1>

	<head lang="en">
		<meta charset="UTF-8">
		<title>Js事件详解--事件处理</title>
	</head>

	<body>
		<button id="btn1">按钮</button>

		<script>
			var btn=document.getElementById("btn1")
			//Event事件对象  其实就是参数
			btn1.onclick=function(event){
				console.log(event); 
			}


		</script>
	</body>
	</htmI>

2.3.1 Event.target

返回事件当前所在的节点，点击谁就打印出来谁。

html 复制代码 
//html代码为
// <p id="para"> Hello </p>
<!DOCTYPE htm1>
<htm1>

	<head lang="en">
		<meta charset="UTF-8">
		<title>Js事件详解--事件处理</title>
	</head>

	<body>
		<button id="btn1">按钮</button>

		<script>
			var btn=document.getElementById("btn1")
			//Event事件对象  其实就是参数
			btn1.onclick=function(event){
				console.log(event.target); 
				event.target.innerHTML="点击之后";/*点击按钮会变成这个字符串*/
			}


		</script>
	</body>
	</htmI>

2.3.2 Event.type

返回一个字符串，表示事件类型。事件的类型是在生成事件的时候。

2.3.3 Event.preventDefault

此方法取消浏览器对当前事件的默认行为，比如点击链接后，浏览器默认会跳转到另一个页面，使用这个方法以后，就不会跳转了。

html 复制代码 
btn.οnclick=function(e){
	e.preventDefault();
	console.log("点击A标签");
	}

2.3.4 Event.stopPropagation()

stopPropagation方法阻止事件在 DOM 中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他的事件监听函数

html 复制代码 
btn.οnclick=function(e){
	e.stopPropagation();//阻止事件冒泡
	console.log("btn");
	}

2.4 事件之键盘事件

键盘事件由用户打击键盘触发，主要有keydown、keypress、keyup三个事件。

  • keydown: 按下键盘时触发
  • keypress: 按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。
  • keyup:松开键盘时触发该事件
html 复制代码 
username.οnkeypress=function(e){
	console.log("keypress事件");
	}

event对象

keyCode:唯一标识

var username=document.getElementById("username");

username.οnkeydοwn=function(e){

if(e.keyCode==13){

console.log("回车");

}

}

2.5 事件之表单事件

表单事件是在使用表单元素及输入框元素可以监听的一系列事件

2.5.1 input事件

input事件当 <input>、<selet>、<textarea> 的值发生变化时触发,即数据发生改变触发此事件。

对于复选框 ( <input type=checkbox> ) 或单选框 ( <input type=radio>)，用户改变选项时，也会触发这个事件

input事件的一个特点，就是会连续触发，比如用户每按下一次按键，就会触发一次input事件。

html 复制代码 
var username=document.getElementById("username");
username.οninput=function(e){
	console.log(e.target.value);
	}
2.5.2 select事件

select事件在<input>、<textarea>里面选中文本时触发

html 复制代码 
//html代码如下
//<input id="test" type="text" value="select me"/>
var elem=document.getElementById('test');
elem.addEventListener('select',function(e){
	console.log("e.type");
	},false);
2.5.3 change事件

Change事件当 <input>、<selet>、<textarea> 的值发生变化时触发，它与input最大的不同就是不会连续触发，只有当全部修改完成时，才会触发。

html 复制代码 
var email=document.getElementById("email");
email.οnchange=function(e){
	console.log(e.target.value);
	}
2.5.3 reset事件、submit事件

这两个事件发生在表单对象 <form>上，而不是发生在表单的成员上。

reset事件当表单重置(所有表单成员变回默认值)时触发

submit事件当表单数据向服务器提交时触发。注意，submit事件的发生对象是<form>元素，而不是<buton>元素，因为提交的是表单，而不是按钮

html 复制代码 
<form id="myForm" onsubmit="submitHandle">
	<button onclick="resetHandle">重置数据</button>
	<button>提交</button>
</form>
html 复制代码 
var myForm = document.getElementById("myForm")
function resetHandle(){
	myForm.reset();
	}
function submitHandle(){console.1og("提交");}

三、定时器

JavaScript 提供定时执行代码的功能成。。它们向任务队列添加定时任务

叫做定时器 (timer)，主要由 setTimeout0 和 setlnterval0 这两个函数来完

3.1 setTimeout

setTimeout 函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。

html 复制代码 
var timerId=setTimeout(func|code,delay);

setTimeout 函数接受两个参数，第一个参数 fun|code 是将要推迟执行的函数名或者一段代码，第二个参数 delay 是推迟执行的毫秒数.

html 复制代码 
setTimeout(function(){
	console.log("定时器")
	},1000)

3.1 setInterval()

setinterval 函数的用法与 setTimeut 完全一致，区别仅仅在于 setintervl 指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行

html 复制代码 
vat timer=setInterval(function(){
	console.log(2);
	},1000)

通过setInterval方法实现网页动画

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		#someDiv{
			width:100px;
			height:100px;
			background:red;
		}
	</style>
</head>
<body>
	<div id="someDiv"></div>
	<script>
		var div=document.getElementById('someDiv');
		var opacity=1;
		//opacity 透明度：范围0-1
		var fader=setInterval(function(){
			opacity-=0.5;
			if(opacity>0){ 
				
				div.style.opacity=opacity; 
			}else{
				clearInterval(fader);
			}
		},30);
	</script>
</body>
</html>

四、防抖

定义：对于短时间内连续触发的事件（滚动事件），让某个时间期限内，事件函数只执行一次。

相关推荐
豐儀麟阁贵几秒前
8.5在方法中抛出异常
java·开发语言·前端·算法
zengyuhan50330 分钟前
Windows BLE 开发指南（Rust windows-rs)
前端·rust
醉方休33 分钟前
Webpack loader 的执行机制
前端·webpack·rust
前端老宋Running42 分钟前
一次从“卡顿地狱”到“丝般顺滑”的 React 搜索优化实战
前端·react.js·掘金日报
隔壁的大叔42 分钟前
如何自己构建一个Markdown增量渲染器
前端·javascript
用户44455436542644 分钟前
Android的自定义View
前端
WILLF1 小时前
HTML iframe 标签
前端·javascript
枫，为落叶1 小时前
Axios使用教程(一）
前端
小章鱼学前端1 小时前
2025 年最新 Fabric.js 实战：一个完整可上线的图片选区标注组件（含全部源码）.
前端·vue.js
ohyeah1 小时前
JavaScript 词法作用域、作用域链与闭包：从代码看机制
前端·javascript
热门推荐
01GitHub 镜像站点02【保姆级教程】免费使用Gemini3的5种方法！免翻墙/国内直连03BongoCat - 跨平台键盘猫动画工具04UV安装并设置国内源05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）06Linux下V2Ray安装配置指南07Google Antigravity：无法登录？早期错误、登录修复和用户反馈指南08Labelme从安装到标注：零基础完整指南09全球最强模型Grok4，国内已可免费使用！（附教程）1046个Nano-banana 精选提示词，持续更新中