JS基础入门篇（二十四）—DOM（下）
1.offsetLeft/offsetTop
offsetLeft/offsetTop : 到定位父级节点的距离.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
padding: 20px;
}
#wrap{
width: 100%;
height: 50px;
border: 1px solid black;
position: absolute;
}
#inner{
background: yellow;
}
#content{
width: 200px;
height: 100px;
margin-left: 30px;
background: red;
position: absolute;
left: 100px;
border:10px solid black;
}
</style>
</head>
<body>
<div id="wrap">
<div id="inner">
<div id="content"></div>
</div>
</div>
<script>
var content=document.getElementById("content");
console.log(content.offsetLeft);//130
console.log(content.offsetTop);//40
</script>
</body>
</html>2.node.getBoundingClientRect
返回值是一个对象，包含了元素盒模型的详细信息(可视大小)；
取对象中详细的属性值(相对于浏览器可视区域)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
}
#wrap{
position: relative;
width:400px;
height:400px;
border: 1px solid #000;
left: 100px;
top: 200px;
}
#box{
width:100px;
height:150px;
background-color:red;
position: absolute;
left: 100px;
top: 200px;
margin: 100px;
padding: 10px;
border: 30px solid #000;
}
</style>
</head>
<body>
<div id="wrap">
<div id="box"></div>
</div>
<!--
node.getBoundingClientRect()
返回值是一个对象，包含了元素盒模型的详细信息(可视大小)；
取对象中详细的属性值(相对于浏览器可视区域)
-->
<script>
var box = document.getElementById("box");
console.log( box.getBoundingClientRect() );
console.log( box.getBoundingClientRect().left );//盒子 左边 距离 可视区 左边 的距离 301
console.log( box.getBoundingClientRect().right);//盒子 右边 距离 可视区 左边 的距离 481
console.log( box.getBoundingClientRect().top);//盒子 顶部 距离 可视区 顶部 的距离 ,这个页面的滚动会发生变化 501
console.log( box.getBoundingClientRect().bottom);//盒子 底部 距离 可视区 顶部 的距离,这个页面的滚动会发生变化 731
console.log( box.getBoundingClientRect().width);//盒子 可视 宽度（就是不包括margin） 180
console.log( box.getBoundingClientRect().height);//盒子 可视 高度（就是不包括margin）230
</script>
</body>
</html>
3.getAtrribute：获取元素属性
<body>
<div id="box" class="div1" age=10></div>
<script>
var box=document.getElementById("box");
//-------------行间 自定义 属性 用getAttribute可以取到------------
console.log(box.getAttribute("age"));//"10"
//-------------行间 自定义 属性 用.和[] 取不到---------------------
console.log(box.age);//undefined
console.log(box["age"]);//undefined
//------------------------------------------------------------
box.gender="woman";
//-------------js中 自定义 属性 用.和[]可以取到------------
console.log(box.gender);//"woman"
console.log(box["gender"]);//"woman"
//-------------js中 自定义 属性 用getAttribute 取不到---------------------
console.log(box.getAttribute("gender"));//null
</script>
</body>3.setAttribute和removeAttribute
setAttribute:设置的自定义属性在行间。
removeAttribute：删除行间所在的自定义属性。
<body>
<img id="img" _src="./2.jpg" src="1.jpg"/>
<script>
var img = document.getElementById("img");
document.onclick = function(){
img.setAttribute( "src", img.getAttribute("_src") );//点击页面后，将图片1换成图片2
};
img.setAttribute( "s", img.getAttribute("_src") );//在行间设置自定义属性 s="./2.jpg".
console.log(img.getAttribute("s"));
setTimeout(function(){
img.removeAttribute( "s" );//页面打开1s后，删除行间设置的自定义属性。
},1000)
</script>
</body>4.移入移出效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<body>
<script>
var ul=document.getElementsByTagName("ul")[0];
var li=ul.getElementsByTagName("li");
var now=li[0];
for(var i=0;i<li.length;i++){
li[i].onmouseover=function () {
//清除上一次的颜色
now.style.background="";
now.previousElementSibling && (now.previousElementSibling.style.background="");
now.nextElementSibling && (now.nextElementSibling.style.background="");
//给此次移上去的li添加颜色
this.style.background="red";
this.previousElementSibling && (this.previousElementSibling.style.background="pink");
this.nextElementSibling && (this.nextElementSibling.style.background="pink");
//将此次对应的li赋值给now。now就知道此次指的是哪个li。
now=this;
}
}
</script>
</body>
</html>JS基础入门篇（二十四）—DOM（下）的更多相关文章
- JS基础入门篇（十二）—JSON和Math
1.JSON JSON: 对象格式的字符串 轻量的数据传输格式 注意事项: 键名 需要 使用 双引号 包起来 JOSN有两个方法:JSON.parse和 JSON.stringify. JSON.pa ...
- JS基础入门篇（十八）—日期对象
1.日期对象 日期对象: 通过new Date()就能创建一个日期对象,这个对象中有当前系统时间的所有详细信息. 以下代码可以获取当前时间: <script> var t = new Da ...
- JS基础入门篇（十）— 数组方法
1.join 作用: 将数组通过指定字符拼接成字符串.语法: string arr.join([separator = ',']);参数: separator可选,如果省略的话,默认为一个逗号.如果 ...
- JS基础入门篇（三十五）—面向对象（二）
如果没有面向对象这种抽象概念的小伙伴,建议先看一下我写的JS基础入门篇(三十四)-面向对象(一)
- Bootstrap入门（二十四）data属性
Bootstrap入门(二十四)data属性 你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码.这是 Bootstrap 中的一 ...
- MyBatis基础入门《二十》动态SQL(foreach)
MyBatis基础入门<二十>动态SQL(foreach) 1. 迭代一个集合,通常用于in条件 2. 属性 > item > index > collection : ...
- JS基础入门篇（二十七）—BOM
虽然上次写到js基础篇(二十四),这次直接写到(二十七).是为了提醒自己中间有几篇没写.特此说明一下啊. 1.window.open() 使用a标签呢,点击一下a标签页面才会跳转,有时候我们需要做的操 ...
- JS基础入门篇（二十四）—DOM（上）
1.常用的节点类型,nodeType,attributes,childNodes. 1.元素节点 - 1 2.属性节点 - 2 3.文本节点 - 3 4.注释节点 - 8 5.文档节点 - 9 查看节 ...
- JS基础入门篇（三十四）— 面向对象（一）
1.对象 对象的定义 : 对象 是 由 键值对 组成的无序集合. 创建对象两种方法 : 方法一 : 字面量方法 var obj = {name: "k"}; 方法二 : new O ...
随机推荐
- python 收集测试日志--格式
Python的logging模块提供了通用的日志系统,这个模块提供不同的日志级别,并可以采用不同的方式记录日志,比如文件,HTTP GET/POST,SMTP,Socket等,甚至可以自己实现方式记录 ...
- nodejs 程序(有的功能和前端js是不一样的)
node文档:http://nodejs.cn/api/ 1.控制台输出 (node的输出是在命令框中输出的): 有颜色的输出 :console.log('\x1B[33m%s\x1b[0m:', p ...
- Tecplot 360 安装后弹出“Is your Tecplot 360 EX liense valid?”解决方法
在hosts文件中添加127.0.0.1 download.tecplot.com这句指令时,应注意1与download之间有空格!
- ssd存储的SLC、MLC、TLC闪存芯片颗粒有什么区别？
SLC = Single-Level Cell ,即1bit/cell,速度快寿命长,价格贵(约MLC 3倍以上的价格),约10万次擦写寿命: MLC = Multi-Level Cell,即2bit ...
- 如何设置Windows操作系统打印机与xlpd连接
Xlpd是Xmanager中负责远程打印的软件,除了打印远程文件,它还具备很多功能,本集将具体讲解Xlpd的主要功能. 主要功能如下: 1. 支持LPD协议(RFC1179) 在RFC1179中定义 ...
- 第6章 RPC之道
6.1 认识RPC 分布式.微服务的架构思维中都不能缺少 RPC 的影子 RPC(Remote Procedure Call)远程过程调用.通过网络在跨进程的两台服务器之间传输信息,我们使用的时候不用 ...
- SqlServer表名称定义
每一个数据表 添加一个 扩展 属性:Description 填写表描述. 查看是否所有表都添加的Sql如下: SELECT a.name AS name, g.[value] FROM sys.ta ...
- C#反射的实现
一,什么是反射? 1,System.Reflection 命名空间中的类与 System.Type 使你能够获取有关加载的程序集和其中定义的类型的信息,如类.接口和值类型. 可以使用反射在运行时创建. ...
- Python之计算当前月份的日期范围（calendar、datetime）
在当前月份中循环每一天大致的思路就是先计算出当月的第一天和下个月的第一天日期,还有当月总共有多少天,然后把第一天日期按照月总天数累加到下个月的第一天,就ok 啦 from datetime impor ...
- mysql分表详解
经常听到有人说“数据表太大了,需要分表”,“xxxx了,要分表”的言论,那么,到底为什么要分表? 难道数据量大就要分表? mysql数据量对索引的影响 本人mysql版本为5.7 新增数据测试 为了测 ...