前端攻城狮---js之dom对象(2)

简介:

本章节主要讲计算后样式和测量的相关知识点。

我们可以通过dom提供的可靠的api,去获取样式计算后最终的值。

计算后样式

获取计算后的样式的方法有以下几种

  • window.getComputedStyle("对象").getPropertyValue("属性");//window可以忽略
  • getComputedStyle("对象")["属性"];
  • 对象.currentStyle.属性;/对象.currentStyle[属性]

我们来分析一下三者的使用区别

-----getComputedStyle("对象").getPropertyValue("属性")

该方法无法兼容到IE6 7 8 ,后面的属性同css样式一样的写法

-----getComputedStyle("对象")["属性"];

该方法同样也无法兼容到IE6 7 8,后面的属性可以用css名字,也可以用到驼峰式。驼峰式如background-color要写成backgroundColor

------对象.currentStyle.属性/对象.currentStyle[属性]
对象.currentStyle.属性/对象.currentStyle[属性]

该方法用于IE6 7 8,后面的属性也需要驼峰式。

-----------------------------------------------------------------

那么有人会问,如果去兼容到IE6 7 8要怎么做?这时候我们就需要进行能力检测。

能力检测

    if(window.getComputedStyle){

        大于IE8的获取计算后样式的方法    

    }else{

        小于IE6 7 8 获取计算后样式的方法    

    }

以上就是获取计算后样式兼容性问题的解决方案,if里面的条件就是能力检测,去检测当前浏览器是否有getComputedStyle方法,没有也就是意味着IE版本小于等于8,则使用小于IE6 7 8的方法。下面我们来写一个封装一个能力检测获取计算后样式的方法。


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
padding: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
/**
obj元素,property属性:可能是css样式的,可能是驼峰式的需要做处理
**/
function isComputedStyle(obj,property){
if (window.getComputedStyle) {//能力检测
return getComputedStyle(obj)[property];//因为css样式或者是驼峰式都可以
}else{
if (property.indexOf("-")) {//非驼峰式需要转成驼峰式
property = property.replace(/\-([a-z])/g,function(match,$1){
return $1.toUpperCase();
})
}
return obj.currentStyle[property];
}
}
console.log(isComputedStyle(div,"padding-left"));
</script>
</body>
</html>

透明度

透明度在css样式中有两种设置方法,和js中设置的方法

    opacity:0.5;    ---->元素.style.opacity = 0.5;

    fliter:alpha(opacity=50);  ---->元素.style.fliter = "alpha(opactity="+50+");";

所以在通过计算后样式的时候,可能会有顾虑,其实高版本就要高版本的获取方式去获取opacity,低版本就用低版本的获取方法去获取opacity就可以算兼容,前提是opacity的值于fliter的值相等即可


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 300px;
height: 300px;
background: #000;
opacity: 0.2;
filter: alpha(opacity=20); /*为了兼容IE*/
}
</style>
</head>
<body>
<div>
</div>
<script type="text/javascript">
// 获取div的透明度
var oDiv = document.getElementsByTagName("div")[0];
alert(getComputedStyle(oDiv)["opacity"]); //0.2 高版本浏览器
// alert(oDiv.currentStyle.opacity); // IE6 7 8 .2
</script>
</body>
</html>
就可以做到兼容。

offsetLeft/offsetTop

因为offsetTop同offsetLeft一样,故在此我们就讲解offsetLeft

offsetLeft表示这个元素的左边距的外面到offsetParent的左边距的内侧的距离。

什么是offsetParent?offsetParent表示参照物,那么offsetParent参照的依据是什么呢?这里就是要为不同的浏览器的版本进行分析。

IE9以及chrome等高级浏览器

            自己祖先元素中,离自己最近的且设置了定位的元素,若都没有则以body为offsetparent。

IE8 

            同高级浏览器一样,但是需要多算上一条border的宽度(父亲的边框)

IE6 7

            第一种情况,自己有定位的,则offsetParent就是离自己最近的且有定位的元素

            第二种情况,自己没有定位的,则offsetParent就是离自己最近的且有width/height的元素

想要去兼容这三种情况要怎么去做?

            自己定位,父无边宽,且父设置了定位。

offsetWidth/offsetHeight

表示自己当前元素的宽高。(都兼容)

    offsetWidth = 左右border+width+左右padding

    offsetHeight = 上下border+height+上下padding

假如没有设置宽度和高度,则width和height有内容撑开。

clientWidth/clientHeight

也是表示自己当前元素的宽高。(都兼容 IE6有点小问题)

    clientWidth = width+左右padding

    clientHeight = height+上下padding

IE6  假如没有设置宽高的话,clientHeight的高度为0,其他浏览器都是正常的

定时器

1.setInterval(function(){},time)

2.setTimeout(function(){},time)

setInterval

表示每个一段时间去调用方法。对应的清除方法是如下


var timer = setInterval(function() {
}, 50);
clearInterval(timer)
setTimeout

表示延迟多少时间去调用方法,方法只调用一次。


var timer = setTimeout(function(){
console.log("setTimeout");
}, 1000);
clearTimeout(timer)

那么我们就可以通过定时器,去给修改元素的值,从而变了动画。下面我们来看看demo


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 60px;
top: 40px;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<script type="text/javascript">
// 页面一打开,div运动到702px自动停止
var box = document.getElementById("box");
var num = 60;
var timer = setInterval(function() {
num+=8;
if(num>=702) {
// 拉终停表
num = 702;
clearInterval(timer);
}
box.style.left = num + "px";
}, 30);
</script>
</body>
</html>

以上demo就是用过定时器去不断的改变left,当left到了的值大于702的时候,就要去解绑定时器。

可以通过定时器去写一个自动无缝的轮播图,还有点击暂停再点击播放的功能。效果图如下。


有几个注意点,从最后一张到第一张图片的过渡,每一张图片的无缝。


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.banner{
width: 600px;
height: 130px;
overflow:hidden;
border: 1px solid black;
margin: 0 auto;
position: relative;
}
.banner .content {
width: 5400px;
height: 130px;
position: absolute;
}
ul{
list-style: none;
}
.banner .content li{
float: left;
}
.banner .content li img{
width: 600px;
height: 130px;
}
</style>
</head>
<body>
<div class="banner" id="banner">
<div class="content" id="content">
<ul>
<li><a href=""><img src="img/0.png"></a></li>
<li><a href=""><img src="img/1.png"></a></li>
<li><a href=""><img src="img/2.png"></a></li>
<li><a href=""><img src="img/3.png"></a></li>
<li><a href=""><img src="img/4.png"></a></li>
<li><a href=""><img src="img/5.png"></a></li>
<li><a href=""><img src="img/6.png"></a></li>
<li><a href=""><img src="img/7.png"></a></li>
<li><a href=""><img src="img/0.png"></a></li>
</ul>
</div>
</div>
<script type="text/javascript">
var banner = document.getElementById("banner");
var content = document.getElementById("content");
var img_list = content.getElementsByTagName("li");
var move_num = 0;
var timer;
move();
for(var i = 0;i<img_list.length;i++){
img_list[i].onclick=function(){
if (timer!=undefined) {
clearInterval(timer);
timer = undefined;
}else{
move();
}
}
}
function move (){
timer = setInterval(function(){
move_num -=5;
if (move_num<=-600*(img_list.length-1)) {
move_num = 0;
// clearInterval(timer);
}
content.style.left = move_num+"px";
},10);
}
</script>
</body>
</html>

Json

与后台的大部分数据交互都是json格式。

    var person = {
    "name":"heihei",
    "age":18,
    "sex":"m",
    "wife": {
    "name": "Angelababy",
    "age":16,
    "shengao":168
    }
    };

其中name就是key,heihei就是value,key必须是字符串带着双引号的。

如何去获取key对应的value?如获取name对应的值

    person.name / person["name"]这两种方式都可以去获取。

如何去给person添加新的值呢?

    person.hobby=["haha","heihei"];直接添加即可

如何去删除某个属性

    delete person.age

如何循环的获取person的k,value?

         for(var k in person) {
          alert(k);// 代表某个属性
          alert(person[k]); // 属性值
         }   

同样json对象还能存放方法

 person.myfun=function(){ console.log("hahaha")};直接添加即可

js的dom对象的基本知识已讲完,接下来会来讲自己封装一个动画运动框架,如有表达错的请谅解,并请提出指出,且修改错误,望能共同进步。

本文作者:gaoyouhuang
本文发布时间:2018年06月23日
本文来自云栖社区合作伙伴 CSDN,了解相关信息可以关注csdn.net网站。
目录
相关文章
|
9天前
|
JavaScript 前端开发
js遍历对象的方法
js遍历对象的方法
16 1
|
1天前
|
人工智能 JavaScript 前端开发
前端秘法基础式终章----欢迎来到JS的世界
前端秘法基础式终章----欢迎来到JS的世界
|
2天前
|
JavaScript 前端开发 算法
【Node.js 版本过高】运行前端时,遇到错误 `Error: error:0308010C:digital envelope routines::unsupported`
【Node.js 版本过高】运行前端时,遇到错误 `Error: error:0308010C:digital envelope routines::unsupported`
9 0
|
2天前
|
前端开发 JavaScript
前端 JavaScript 与 HTML 怎么实现交互
前端 JavaScript 与 HTML 怎么实现交互
|
2天前
|
JavaScript 前端开发
JS将两个数组和合并成数组包对象格式的方法
JS将两个数组和合并成数组包对象格式的方法
6 0
|
6天前
|
前端开发 JavaScript 数据处理
JavaScript中的异步编程及Promise对象
【2月更文挑战第3天】 传统的JavaScript编程模式在处理异步任务时常常会导致回调地狱和代码可读性较差的问题,而Promise对象的引入为解决这一问题提供了一种优雅的解决方案。本文将介绍JavaScript中的异步编程方式以及Promise对象的使用方法和优势,帮助读者更好地理解和运用异步编程技术。
14 8
|
8天前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
23 1
|
9天前
|
JavaScript 前端开发 开发者
深入探讨前端框架Vue.js的数据绑定原理
在前端开发中,数据绑定是Vue.js框架的核心特性之一,它实现了视图与数据的双向绑定,极大地提高了开发效率和用户体验。本文将深入探讨Vue.js数据绑定的原理,从响应式数据、依赖追踪到虚拟DOM等方面进行详细分析,帮助读者更好地理解Vue.js框架的工作机制。
9 0
|
9天前
|
缓存 JavaScript 前端开发
前端工程化:优化JS加载速度
在现代Web应用中,JavaScript已成为必不可少的一部分,但是随着业务复杂度的增加,JS文件的体积也越来越大,导致网页加载速度变慢,影响用户体验。本文将介绍前端工程化的优化策略,以提高JS文件的加载速度。
|
10天前
|
存储 缓存 JavaScript
解密前端框架Vue.js的响应式原理
作为当下最流行的前端框架之一,Vue.js的响应式原理是其核心之一。本文将深入探讨Vue.js的响应式原理,从数据劫持、依赖收集到更新视图的完整流程,帮助读者更好地理解Vue.js框架的工作方式。

相关产品

  • 云迁移中心