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 ...
随机推荐
- vue项目打包之后原本好的样式变得不好了的原因分析
这个主要是打包的过程将所有的css文件进行归类压缩,导致原先其他文件里的样式对当前的产生了影响,应该有同样的类名了.怎么改?要么改类名,要么用scope,scss的写法.
- css3D动画
css3D动画 前言 最近玩了玩用css来构建3D效果,写了几个demo,所以博客总结一下. 在阅读这篇博客之前,请先自行了解一下css 3D的属性,例如:transform-style,transf ...
- SercletConfig 详解
ServletConfig:从一个servlet被实例化后,对任何客户端在任何时候访问有效,但仅对本servlet有效,一个servlet的ServletConfig对象不能被另一个servlet访问 ...
- mybatis 插入
实体类 Mapper接口 void addUser(User user); Mapper.xml <insert id="addUser" useGeneratedKeys= ...
- Java学习之包
一.包:就是类的命名空间(在文件系统中的表现形式就是文件夹) 二.代码编写规则 1.写在程序文件的第一行 2.格式:package 包名[.包名1.包名2......] 类的全名称 包名.类名 例如: ...
- Linux查看文件大小5个常用命令
1. 前言 Linux 系统有非常好用的命令,功能也非常丰富,如果你对命令行工具熟悉,可以非常高效率完成维护工具.本文主要介绍Linux系统中,用于查看文件大小的命令. Linux 查看文件大小5个常 ...
- spring boot 尚桂谷学习笔记08 Docker ---Web
------Docker------ 简介:Docker是一个开元的应用容器引擎,性能非常高 已经安装好的软件打包成一个镜像放到服务器中运行镜像 MySQL容器,Redis容器...... Docke ...
- HTML- 锚点实例
<!DOCTYPE HTML> <html> <head> <meta charset='utf-8'> <title>锚点实例</t ...
- Ajax 中Post 与 Get的 实例
Ajax中 Post 与 Get 实例 Ajax的POST实例,index.html <html> <head> <script type="text/ja ...
- linux查看日志中特定字符串以及前后信息内容命令
在项目实施过程中,我们经常会查看日志,更是经常会根据某些特地字符串去查找日志内容. 下面就是日志查找命令: 1.查询字符串命令: cat fileName|grep '要查找的字符串' 实例:cat ...