- <script>
- var len=document.getElementsByTagName("li");
- for(var i=0;i
length;i++){ - len[i].onmouseover=function(){
- this.className="over";
- }
- len[i].onmouseout=function(){
- this.className="out";
- }
- }
.ClassList属性有以下几种方法:
(1)通过ClassList可以获取元素的全部类名;
(2)通过ClassList.remove()可以删除元素的一个或多个类名;
(3)通过ClassList.add()可以向元素添加一个或多个类名;
(4)通过ClassList.lentgh可以获取到元素类名的数量;
(5)通过ClassList.item(x)可以获取到元素类名索引为x的类名;
(6)通过ClassList.toggle可以为元素切换类;
(7)通过ClassList.contains(x)查看元素是否存在类名为"x"的类;
- <script>
- 类操作:
- 增加类:
- dom对象.classList.add("类名1", "类名2", ...)
- 删除类:
- dom对象.classList.remove("类名1", "类名2", ...)
- 删除/添加类
- dom对象.classList.toggle("类名") 如果dom对象含有此类,删除此类,如果没有这个类,添加上这个类
- dom对象.classList.toggle("类名",参数2)
- 参数2:可选 布尔值 如果为false,表示删除类,如果为true,表示添加类
-
- dom对象.classList.contains("类") 判断dom对象是否含有某个类 如果含有此类返回true,否则返回false
- script>
获取样式
w3c标准浏览器获取计算样式
getComputedStyle(dom对象).样式属性名
ie8及以下版本
dom对象.currentStyle.样式属性名
- <script>
- //1.
- function getStyle(elem, name) {
- if (elem.currentStyle) {//ie8及以下版本
- return elem.currentStyle[name];
- } else if (getComputedStyle) {
- return getComputedStyle(elem)[name];
- }
- }
-
- //2.
- try {
- w = getComputedStyle(oDiv).width;
- } catch (err) {
- w = oDiv.currentStyle.width;
- }
- script>
- dom对象.scrollLeft
获取/设置dom对象的水平滚动条滚动的距离- dom对象.scrollTop
获取/设置dom对象的垂直滚动条滚动的距离- dom对象.scrollWidth
获取dom对象的实际内容的宽度- dom对象.scrollWidth
获取dom对象的实际内容的宽度
- dom对象.offsetParent是拥有position属性,并且值为relative、absolute或fixed的父容器,如果父容器没有position属性,则为body
- dom对象.offsetLeft
获取dom对象距离offsetParent左侧的距离- dom对象.offsetTop
获取dom对象距离offsetParent上侧的距离- dom对象.offsetWidth
获取dom对象盒子的宽度- dom对象.offsetHeight
获取dom对象盒子的高度
- <script>
- var oDiv = document.getElementById("box");
- // console.log(oDiv.offsetParent);//body .container
- // console.log(oDiv.offsetLeft);
- // console.log(oDiv.offsetTop);
- console.log(oDiv.offsetWidth);
- console.log(oDiv.offsetHeight);
-
- dom对象.offsetTop 获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置 。
- 获取dom对象距离版面或offsetParent上侧的距离
-
- dom对象.offsetLeft 获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
- 获取dom对象距离版面或offsetParent左侧的距离
-
- offsetParent:布局中设置position属性(Relative、Absolute、fixed)的父容器,或者父元素无postion,从最近的父节点开始,一层层向上找,直到HTML的body。
-
- dom对象.offsetWidth 获取dom元素的盒子宽度 (width + padding + border)
- dom对象.offsetHeight 获取dom元素的盒子高度 (height + padding + border)
- script>
clientHeight 和 offsetHeight 属性与元素的滚动和位置无关。它们代表元素的高度,其中:clientHeight:元素的高度,包括padding但不包括border、水平滚动条和margin。 对于内联元素,该属性始终为0,单位px,只读元素。

offsetHeight:包括padding、border、水平滚动条,但不包括margin元素的高度。对于内联元素,该属性始终为 0,单位px,只读元素。当这个元素的子元素高于这个元素并overflow=scroll时,这个元素就会滚动。此时:scrollHeight:因为子元素比父元素高,所以父元素不希望被子元素支持的和显示滚动条一样高。
scrollHeight 表示元素的高度,包括当前不可见的部分。可见部分的高度其实就是clientHeight,即scrollHeight>=clientHeight总是成立的。有滚动条的时候讨论scrollHeight才有意义,没有滚动条的时候scrollHeightclientHeight总是成立。单位px,只读元素。
scrollTop:表示有滚动条时滚动条向下滚动的距离,即元素顶部被覆盖部分的高度。没有滚动条时,总是建立scrollTop0。单位是px,可以读取和设置。
offsetTop:当前元素顶部到最近父元素顶部的距离,与是否有滚动条无关。单位px,只读元素。
- event.clientX
获取距离浏览器可视区域左侧的坐标值- event.clientY
获取距离浏览器可视区域上侧的坐标值- event.pageX
获取距离文档左侧的坐标值- event.pageY
获取距离文档上侧的坐标值- document.documentElement.clientWidth
获取浏览器可视区域的宽度- document.documentElement.clientHeight
获取浏览器可视区域的高度
- <script>
- 浏览器可视区域宽度与高度(不包含滚动条)
- console.log(document.documentElement.clientWidth);
- console.log(document.documentElement.clientHeight);
-
- body 元素 内容大小
- console.log(document.body.clientWidth);
- console.log(document.body.clientHeight);
-
- 浏览器可视区域宽度与高度(包含滚动条)
- console.log(window.innerWidth);
- console.log(window.innerHeight);
- 获取鼠标距离浏览器可视区域左侧或上侧坐标
- event.clientX
- event.clientY
-
- 获取鼠标距离文档左侧或上侧坐标
- event.pageX
- event.pageY
-
-
- event.pageX = event.clientX + scrollLeft
- event.pageY = event.clientY + scrollTop
- script>
- 事件模型
- 内联模型
事件写在标签上 与js没有分离
- 脚本模型
事件在脚本内部进行绑定
缺点:给同一个元素绑定同一个事件多次,第二次会把第一次的事件绑定覆盖
- DOM2级模型
- 事件流类型
- 事件冒泡流
事件由最开始的元素接收,然后逐级向上传播到最不具体的那个节点(文档)
- 事件捕获流
事件由最最不具体的那个节点(文档)元素接收,然后逐级向下广播到最具体的那个元素- DOM2级事件绑定
- dom对象.addEventListener(参数1,参数2,参数3)
w3c 绑定事件方法
参数1:事件名 不加on
参数2:事件触发后调用的函数
参数3:事件流类型 默认为false 事件冒泡流,如果为true则为事件捕获流
- <script>
- 事件监听
- dom对象.addEventListener(参数1,参数2,参数3)
- 参数1:事件名 不加on
- 参数2:事件触发后调用的函数
- 参数3:事件流类型 默认false 事件冒泡流 如果为true,为事件捕获流
-
- oBtn.addEventListener("click", function () {}
- script>
ev.target 返回的是触发事件的对象(元素)
this 返回的是绑定事件的对象(元素)
区别 :
ev.target 点击了哪个元素,就返回哪个元素
this 哪个元素绑定了这个点击事件,那么就返回谁
- keydown:在键盘上按下某个键时触发。如果按住某个键,会不断触发该事件,但是 Opera 浏览器不支持这种连续操作。该事件处理函数返回 false 时,会取消默认的动作(如输入的键盘字符,在 IE 和 Safari 浏览器下还会禁止keypress 事件响应)。
- keypress:按下某个键盘键并释放时触发。如果按住某个键,会不断触发该事件。该事件处理函数返回 false 时,会取消默认的动作(如输入的键盘字符)。
- keyup:释放某个键盘键时触发。该事件仅在松开键盘时触发一次,不是一个持续的响应状态。
| 属性 | 说明 |
|---|---|
| keyCode | 该属性包含键盘中对应键位的键值 |
| charCode | 该属性包含键盘中对应键位的 Unicode 编码,仅 DOM 支持 |
| target | 发生事件的节点(包含元素),仅 DOM 支持 |
| srcElement | 发生事件的元素,仅 IE 支持 |
| shiftKey | 是否按下 Shift 键,如果按下返回 true,否则为false |
| ctrlKey | 是否按下 Ctrl 键,如果按下返回 true,否则为false |
| altKey | 是否按下 Alt 键,如果按下返回 true,否则为false |
| metaKey | 是否按下 Mtea 键,如果按下返回 true,否则为false,仅 DOM 支持 |
- <style>
- .box {
- position: relative;
- width: 500px;
- height: 500px;
- margin: 0 auto;
- box-shadow: 0 0 0 2px #00f;
- }
-
- .box .mask {
- display: none;
- position: absolute;
- left: 0;
- top: 0;
- width: 300px;
- height: 300px;
- background-color: rgba(255, 255, 0, 0.6);
- }
- style>
- head>
-
- <body>
- <div class="box">
- <div class="mask">div>
- div>
- body>
- <script>
- var oMask = document.querySelector(".box .mask");
- var oDiv = document.querySelector(".box");
- oDiv.onmouseover = function () {
- oMask.style.display = "block";
- oMask.style.cursor = "move";
- oMask.onmousemove = function (ev) {
- // console.log(ev.clientX);
- var lf = ev.clientX - oMask.offsetWidth / 2 - oDiv.offsetLeft;
- var tp = ev.clientY - oMask.offsetHeight / 2 - oDiv.offsetTop;
- if (lf <= 0) {
- lf = 0;
- }
- if (lf >= oDiv.offsetWidth - oMask.offsetWidth) {
- lf = oDiv.offsetWidth - oMask.offsetWidth;
- }
-
- if (tp <= 0) {
- tp = 0;
- }
- if (tp >= oDiv.offsetHeight - oMask.offsetHeight) {
- tp = oDiv.offsetHeight - oMask.offsetHeight;
- }
- oMask.style.left = lf + "px";
- oMask.style.top = tp + "px";
-
- }
- }
-
- oDiv.onmouseout = function () {
- oMask.style.display = "none";
- }
-
-
- script>