JavaScript基础回顾知识点记录6-操作元素样式和事件对象（介绍基本使用）
- 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-操作元素样式和事件对象（介绍基本使用）的更多相关文章
- JavaScript基础回顾知识点记录4-正则表达式篇（介绍基本使用）
js 中 正则表达式使用 创建正则对象和test方法使用 /* 创建正则表达式的对象 语法: var 变量 = new RegExp("正则表达式","匹配模式" ...
- JavaScript基础回顾知识点记录3
js 中 垃圾回收 //将不在使用的对象设置为null , js就会自动进行垃圾回收机制 var obj = {}; obj = null; js 中 数组基本介绍 数组也是一个对象 与普通对象功能类 ...
- JavaScript基础回顾知识点记录2
js 使用嵌套for循环输出三角形 for(var i=0; i<5; i++){ //正三角 // for(var j=0; j<i+1; j++){ // document.write ...
- JavaScript基础回顾知识点记录1
js执行顺序为从上往下执行 js中有6种数据类型 基本数据类型为: String Number Boolean Null Undefined 引用数据类型为: Object 使用typeof 查看对象 ...
- Javascript基础回顾 之(三) 面向对象
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
- Javascript基础回顾 之(一) 类型
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
- Javascript基础回顾 之(二) 作用域
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
- JavaScript 基础回顾——对象
JavaScript是基于对象的解释性语言,全部数据都是对象.在 JavaScript 中并没有 class 的概念,但是可以通过对象和类的模拟来实现面向对象编程. 1.对象 在JavaScript中 ...
- javascript基础入门知识点整理
学习目标: - 掌握编程的基本思维 - 掌握编程的基本语法 typora-copy-images-to: media JavaScript基础 HTML和CSS 京东 课前娱乐 众人皆笑我疯癫,我笑尔 ...
随机推荐
- 线程安全性-原子性之Atomic包
先了解什么是线程安全性:当多个线程访问某个类时,不管运行时环境采用何种调度方式或者这些进程将如何交替执行,并且在主调代码中不需要任何额外的同步或协同,这个类都能表现出正确的行为,那么就称为这个类是线程 ...
- Apache Poi 操作word，替换字符保留样式问题，runs段落混乱问题。
关于这个问题也是刚好遇到,一通搜索也没有找到类似的或者是有效的方法.下面介绍一下. 首先apache poi的引入 <dependency> <groupId>org.apac ...
- mysql5.7安装要踩的坑
因为官网下载的是绿色版,所以要做一些配置 1.在mysql根目录新增data文件夹和my.ini文件 my.ini文件内容 [mysql]# 设置mysql客户端默认字符集default-charac ...
- WPF 视频硬解码渲染播放（无空域）（支持4K、8K、高帧率视频）
MediaWPF 基于 .NET 6 实现视频硬解码渲染Demo(无空域问题) 代码实现仅供学习参考 本项目视频渲染通过显卡进行视频解码,CPU几乎不参与工作,并且不存在令人烦躁的空域问题. 在播放摄 ...
- JavaScript扩展原型链浅析
前言 上文对原型和原型链做了一些简单的概念介绍和解析,本文将浅析一些原型链的扩展. javaScript原型和原型链 http://lewyon.xyz/prototype.html 扩展原型链 使用 ...
- Java模拟西宝高速公路
@ 目录 写在前面 一.仿真模拟的具体要求 二.类的设计 2.1 抽象父类PubVehicles 2.2 Expressway类 2.3 Passenger类 2.4 Timer类 2.5 Displ ...
- 网络通讯之Socket-Tcp（二）
网络通讯之Socket-Tcp 分成2部分讲解: 网络通讯之Socket-Tcp(一): 1.如何理解Socket 2.Socket通信重要函数 3.Socket Tcp 调用的基本流程图 4.简单 ...
- SQLZOO练习5--join（表的连接）
game表: id mdate stadium team1 team2 1001 8 June 2012 National Stadium, Warsaw POL GRE 1002 8 June 20 ...
- OGC WebGIS 常用服务标准（WMS/WMTS/TMS/WFS）速查
本文只介绍实际工作中常用的 WMS.WMTS.WFS.TMS 四种,WCS.WPS 等其它 OGC WebService 类型请自行查阅官方资料. 目录 0. 参数传递方式 1. WMS 速查 1.1 ...
- ORM框架介绍——什么是ORM框架？
1.什么是ORM?对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术.ORM框架是连接数据库的桥梁,只要提供 ...