• js 中 操作元素样式

    • 通过js修改元素内联样式（设置和读取的都是内联样式）
    • 获取当前元素显示的样式 
      <html>
      
	<head>
      
		<meta charset="utf-8">
      
		<title></title>
      
	</head>
      
	<style type="text/css">
      
		#box1 {
      
			width: 200px;
      
			height: 200px;
      
			background-color: aquamarine;
      
		}
      
	</style>
      
	<body>
      
		<button type="button" id="btn1">点我下1</button>
      
		<button type="button" id="btn2">点我下2</button>
      
		<button type="button" id="btn3">点我下3</button>
      
		<br><br>
      
		<div id="box1">

		</div>
      
	</body>
      
	<script type="text/javascript">
      
		window.onload = function() {
      
			var btn01 = document.getElementById("btn1");
      
			var box01 = document.getElementById("box1");
      
			btn01.onclick = function() {
      
				/*
      
				通过js修改元素内联样式:
      
					语法:  元素对象.style.样式名 = 样式值
      
					样式名： background-color 是不符合的， 需要改为驼峰命名： backgroundColor
      
					注意： 这种方法设置和读取的都是内联样式
      
				*/
      
				box01.style.width = "400px";
      
				box01.style.height = "400px";
      
				box01.style.backgroundColor = "red";
      
			}
      
			/*
      
			获取当前元素显示的样式：
      
				语法: 元素对象.currentStyle.样式名  。 此方法只有IE浏览器支持
      
				其他浏览器获取样式： getComputedStyle(元素对象,null).样式名 ;

			*/
      
			var btn2 = document.getElementById("btn2");
      
			btn2.onclick = function() {
      
				alert(box01.currentStyle.width);
      
			}

			var btn3 = document.getElementById("btn3");
      
			btn3.onclick = function() {
      
				var style_obj = getComputedStyle(box1, null);
      
				alert(style_obj.width);
      
			}
      
		}
      
	</script>
      
</html>
  • js 中 事件对象
    • 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
    • 在这个事件对象中封装了当前事件相关的一切信息（鼠标的坐标、键盘那个键被按下，鼠标滚动的方向等）
    • 注意: 在ie8及以下浏览器中，响应函数触发时，不会传递事件对象。 事件对象是作为window对象的属性来存储的。
    • 以一个鼠标移入某个区域后显示x、y坐标为例子 
      <html>
      
	<head>
      
		<meta charset="utf-8">
      
		<title></title>
      
	</head>
      
	<style type="text/css">
      
		#areaDiv {
      
			width: 200px;
      
			height: 100px;
      
			border: black 3px solid;
      
			margin-bottom: 10px;
      
		}

		#showMsg {
      
			width: 200px;
      
			height: 30px;
      
			border: black 3px solid;
      
		}
      
	</style>
      
	<body>
      
		<div id="areaDiv"></div>
      
		<div id="showMsg"></div>
      
	</body>
      
	<script type="text/javascript">
      
		var areaDiv = document.getElementById('areaDiv');
      
		var showMsg = document.getElementById('showMsg');

		/*
      
			 onmousemove 事件： 鼠标在元素中移动时触发
      
			 事件对象： 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
      
				在这个事件对象中封装了当前事件相关的一切信息（鼠标的坐标、键盘那个键被按下，鼠标滚动的方向等）
      
			 note: 在ie8及以下浏览器中，响应函数触发时，不会传递事件对象。 事件对象是作为window对象的属性来存储的。

		*/

		areaDiv.onmousemove = function(e) {
      
			// 解决事件对象兼容性问题： 两种写法：
      
			// if (!e) {
      
			// 	e = window.e;
      
			// }
      
			e = e || window.e;
      
			showMsg.innerHTML = 'x坐标：' + e.clientX + ',y坐标：' + e.clientY;
      
		}

		areaDiv.onmouseout = function() {
      
			showMsg.innerHTML = '';
      
		}
      
	</script>
      
</html>
  • 鼠标移动事件，实现某个div跟随鼠标移动（复制代码运行直接看效果更直观） 
    <html>
    
	<head>
    
		<meta charset="utf-8">
    
		<title></title>
    
	</head>
    
	<style type="text/css">
    
		#box {
    
			position: absolute;
    
			width: 50px;
    
			height: 50px;
    
			background-color: #7FFFD4;
    
		}
    
	</style>
    
	<body style="height: 1200px;">
    
		<div id="box">

		</div>
    
	</body>
    
	<script type="text/javascript">
    
		/*
    
			clientX 和 clientY 是获取当前可见页窗口的坐标
    
			pageX 和 pageY 是获取相对当前页面的坐标 （当页面可以往下滚动时，需要使用这个获取坐标）,但是在IE8中不支持
    
		*/
    
		document.onmousemove = function(e) {
    
			/*
    
				获取滚动条高度
    
				IE和火狐不识别滚动条属于body的， 谷歌、edge可以识别。
    
				IE和火狐认为滚动条属于html的。documentElement，但是edge识别不了html的滚动条
    
			*/
    
			var st = document.body.scrollTop || document.documentElement.scrollTop;
    
			e = e || window.e;
    
			var box = document.getElementById('box');
    
			box.style.left = e.clientX + 'px';
    
			box.style.top = e.clientY + st + 'px';
    
		}
    
	</script>
    
</html>

JavaScript基础回顾知识点记录6-操作元素样式和事件对象（介绍基本使用）的更多相关文章

  1. JavaScript基础回顾知识点记录4-正则表达式篇（介绍基本使用）

    js 中 正则表达式使用 创建正则对象和test方法使用 /* 创建正则表达式的对象 语法: var 变量 = new RegExp("正则表达式","匹配模式" ...

  2. JavaScript基础回顾知识点记录3

    js 中 垃圾回收 //将不在使用的对象设置为null , js就会自动进行垃圾回收机制 var obj = {}; obj = null; js 中 数组基本介绍 数组也是一个对象 与普通对象功能类 ...

  3. JavaScript基础回顾知识点记录2

    js 使用嵌套for循环输出三角形 for(var i=0; i<5; i++){ //正三角 // for(var j=0; j<i+1; j++){ // document.write ...

  4. JavaScript基础回顾知识点记录1

    js执行顺序为从上往下执行 js中有6种数据类型 基本数据类型为: String Number Boolean Null Undefined 引用数据类型为: Object 使用typeof 查看对象 ...

  5. Javascript基础回顾 之(三) 面向对象

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  6. Javascript基础回顾 之(一) 类型

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  7. Javascript基础回顾 之(二) 作用域

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  8. JavaScript 基础回顾——对象

    JavaScript是基于对象的解释性语言,全部数据都是对象.在 JavaScript 中并没有 class 的概念,但是可以通过对象和类的模拟来实现面向对象编程. 1.对象 在JavaScript中 ...

  9. javascript基础入门知识点整理

    学习目标: - 掌握编程的基本思维 - 掌握编程的基本语法 typora-copy-images-to: media JavaScript基础 HTML和CSS 京东 课前娱乐 众人皆笑我疯癫,我笑尔 ...

随机推荐

  1. Kafka 负载均衡在 vivo 的落地实践

    ​vivo 互联网服务器团队-You Shuo 副本迁移是Kafka最高频的操作,对于一个拥有几十万个副本的集群,通过人工去完成副本迁移是一件很困难的事情.Cruise Control作为Kafka的 ...

  2. Xmind演讲主题大纲

    参考:https://www.bilibili.com/video/BV1Rb411s7VG?p=9

  3. 互联网大厂目标管理OKR实践落地与反思

    上一篇「 互联网公司目标管理OKR和绩效考核的误区 」介绍了使用 OKR 时要澄清的一些概念,但是实际使用中又如何呢?我们快手也是很大的互联网公司,大家都是年轻人,思维活跃,容易接受新事物,敢尝试,但 ...

  4. C# 读写文件从用户态切到内核态，到底是个什么流程？

    一:背景 1. 一个很好奇的问题 我们在学习 C# 的过程中,总会听到一个词叫做 内核态 ,比如说用 C# 读写文件,会涉及到代码从 用户态 到 内核态 的切换,用 HttpClient 获取远端的数 ...

  5. JS：变量的作用域

    1.作用域: 指一个变量它在哪些代码范围能够被使用,这些地方就是变量的作用域 JS中的两种作用域: 1.全局作用域.2.函数作用域   2.在es5中 函数的代码块内部的代码 可以访问形参变量  也可 ...

  6. zabbix配置邮件报警

    1.yum源安装sendmail,sendmail-cf和mailx 2.关闭postfix,/etc/init.d/postfix stop chkconfig posfix off 3.启动sen ...

  7. MySQL 锁常见知识点&面试题总结

    节选自 <MySQL 常见知识点&面试题总结> 表级锁和行级锁了解吗?有什么区别? MyISAM 仅仅支持表级锁(table-level locking),一锁就锁整张表,这在并发 ...

  8. CentOS yum命令404

    1.获得新的repo列表文件 http://mirrors.163.com/.help/centos.html 2.备份 mv /etc/yum.repos.d/CentOS-Base.repo Ce ...

  9. Thread类的常用方法_获取线程名称的方法和设置线程名称的方法

    Thread类的常用方法 获取线程的名称: 1.使用Thread类中的方法getName() String getName() 返回该线程的名称 2.可以先获取到当前正在执行的线程,使用线程中的方法g ...

  10. MySQL语句与正则表达式

    正则表达式的作用是匹配文本,将一个模式(正则表达式)与一个文本串进行比较.MySQL用WHERE子句对正则表达式提供了初步的支持,允许你指定正则表达式,过滤SELECT检索出的数据. 1.元字符说明 ...