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 ...
随机推荐
- zenoss(智能监控软件)
Zenoss Core是开源企业级IT管理软件-是智能监控软件,他允许IT管理员依靠单一的WEB控制台来监控网络架构的状态和健康度,同时也是开源的网络与系统管理软件.全名 Zenos ...
- 【靶场练习_sqli-labs】SQLi-LABS Page-3 (Stacked Injections)
Less-39: ?id=1 and 1 ,?id=1 and 1 : 回显不同,数字型 ?id=0 union select 1,2,group_concat(table_name) from in ...
- 【Java架构：持续交付】一篇文章搞掂：持续交付理论
一.持续集成.持续交付.DevOps概念,关系等 持续集成(Continuous integration/CI) 持续交付(Continuous delivery/CD) 持续部署() 持续 (Con ...
- Unzip 解压报错
$ jar xvf pcre-8.10.zip 如果出现 jar:Command not found 要用yum下载 $ yum -y install java-1.6.0-openjdk-d ...
- anaconda 安装2个python环境 亲测
本机环境: anaconda3,pyhon3.7.4 配置第2个python环境,安装python3.6 > conda create --name tensorflow python=3.6 ...
- QTP 通过URL地址下载文件到本地(转）
While automation, you may come to situations where you need to need to download a file on clicking a ...
- 基本数据类型和string类型的转换
基本数据类型转string类型: 方式1:fmt.Sprintf("%参数", 表达式) [个人习惯这个,灵活] 函数的介绍: func Sprintf func Sprintf( ...
- java虚拟机规范(se8)——class文件格式(三)
4.5 字段 字段使用field_info结构来描述. 在同一个class文件中的两个字段不能有相同的名称和描述符. 结构的格式如下: field_info { u2 access_flags; u2 ...
- 怎么避免从删库到跑路 -- 详解 mysql binlog 的配置与使用
1. 引言 使用数据库的时候,我们每个操作都十分小心,尤其是不能直接在数据库上执行 update.delete 等操作,否则万一忘记加全 where 条件,可能就会造成无法挽回的结果. 有一句十分流行 ...
- vue - blog开发学习5
基本功能和后台联调 1.首页的所有博客 因为是前后台都是本地开发,所以前端vue需要设置proxy:修改/config/index.js中的这个proxyTable proxyTable: { '/a ...