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 ...
随机推荐
- Microsoft SQL Server（sql server 关系型数据库管理系统）
sql server一般指Microsoft SQL Server 关系型数据库管理系统 Microsoft SQL Server 是一个全面的数据库平台,使用集成的商业智能 (BI)工具提供了企业级 ...
- LOJ 6436 「PKUSC2018」神仙的游戏——思路+卷积
题目:https://loj.ac/problem/6436 看题解才会. 有长为 i 的 border ,就是有长为 n-i 的循环节. 考虑如果 x 位置上是 0 . y 位置上是 1 ,那么长度 ...
- HashMap的底层原理 cr:csdn:zhangshixi
1. HashMap概述: HashMap是基于哈希表的Map接口的非同步实现.此实现提供所有可选的映射操作,并允许使用null值和null键.此类不保证映射的顺序,特别是它不保证该顺序恒久不变 ...
- sql查询语句得到返回值fetchone（）
需求: 现在mysql中有一张表,表名是info,我想通过报案号4201820330114401021497在这张表里查询出它对应的id. sql = "select claim_id fr ...
- jQuery-resize和scroll的性能优化
## 下面是进行测试和研究怎么实现的用的 Document 改变页面大小试试 Document 滚动滚动条试试
- 0.OpenCV框架
reference: https://docs.opencv.org/4.1.2/ 基本使用 1.图片和视频,读写(2,8) 2.OpenCV基本数据类型(3) 3.OpenCV大型数据类型及操作:图 ...
- oracle执行计划（转载）
转载自 https://www.cnblogs.com/Dreamer-1/p/6076440.html 一:什么是Oracle执行计划? 执行计划是一条查询语句在Oracle中的执行过程或访问路径的 ...
- java中封装的使用方法（工具myeclipse）
封装可以实现属性私有化,将类的属性修饰符由public改为private,如此做者,其他类就无法访问该类中被private修饰的对象,一般我们会使用setter/getter()方法实现对这些对象的访 ...
- idea配置svn正确步骤（下载svn的过程就不写了）
打开----->File------>Settings 2. 3在vcs中选择 4进入此界面 5选择 这样svn就配置好了
- spring注解开发：ComponentScan组件扫描
在使用xml方式配置时,我们只需要在xml中配置如下代码: <context:component-scan base-package="包名"></context ...