首先我们要介绍一些知识

offsetWidth

  element.offsetWidth = width + padding + border;

width

我们也知道element.style.width 这个属性一般用来修改属性,那么在获取这个属性的时候,

如果这个元素的的样式是定义在css的文件或者头样式中,都是获取不到的,只有行内样式才是获取到

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取样式</title>
<style>
.animation{
background-color: green;
height: 200px;
width: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="test" class="animation"></div>
</body>
<script type="text/javascript">
window.onload = function(){
var ele = document.getElementById("test"),
timer = null; ele.onmouseover = function(){
startAnimation();
} function startAnimation(){
clearInterval(timer);
var _ele = document.getElementById("test");
timer = setInterval(function(){
//_ele.style.width = _ele.offsetWidth -1 +'px';//1 offsetWidth = width + padding + border
console.log(_ele.style.width);//2 当width不写入行内style="width:200px"中的话,定义在css文件中,获取不到width
//_ele.style.width = parseInt(_ele.style.width) - 1 +'px';//3 offsetWidth = width + padding + border //
},100)
} }
</script>
</html>

  我们把1和3 注释了,2注释打印就可以看出,是获取不到的width是200值的。只有把

<div id="test" class="animation" style="width:200px;"></div>

  这样就可以获得到width的值

现在我们来做一写测试,给这个div宽度缩小的代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取样式</title>
<style>
.animation{
background-color: green;
height: 200px;
width: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="test" class="animation" ></div>
</body>
<script type="text/javascript">
window.onload = function(){
var ele = document.getElementById("test"),
timer = null; ele.onmouseover = function(){
startAnimation();
} function startAnimation(){
clearInterval(timer);
var _ele = document.getElementById("test");
timer = setInterval(function(){
_ele.style.width = _ele.offsetWidth -1 +'px';//1 offsetWidth = width + padding + border
//onsole.log(_ele.style.width);//2 当width不写入行内style="width:200px"中的话,定义在css文件中,获取不到width
//_ele.style.width = parseInt(_ele.style.width) - 1 +'px';//3 offsetWidth = width + padding + border //
},100)
} }
</script>
</html>

  但是我们看到的是这个元素在变大,这个是为什么呢?这个就是offsetWidth的原因,

1.开始的时候offsetWidth = width(200px)+padding(0px)+border(1+1) = 202px;

那么_ele.style.width = 202-1 = 201px;

2.当下一个计算,

那么offsetWidth = width(201)+padding(0px)+border(1+1) = 203px;

那么_ele.style.width = 203-1 = 202px;

依次类推,所以每次div元素的宽度都在变大。

那我们怎么解决~~上面我们说了把width的属性放入到行内样式中,可以达到这个效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取样式</title>
<style>
.animation{
background-color: green;
height: 200px;
width: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="test" class="animation" style="width:200px;"></div>
</body>
<script type="text/javascript">
window.onload = function(){
var ele = document.getElementById("test"),
timer = null; ele.onmouseover = function(){
startAnimation();
} function startAnimation(){
clearInterval(timer);
var _ele = document.getElementById("test");
timer = setInterval(function(){
//_ele.style.width = _ele.offsetWidth -1 +'px';//1 offsetWidth = width + padding + border
//onsole.log(_ele.style.width);//2 当width不写入行内style="width:200px"中的话,定义在css文件中,获取不到width
_ele.style.width = parseInt(_ele.style.width) - 1 +'px';//3 offsetWidth = width + padding + border //
},100)
} }
</script>
</html>

  这样解决了,但是有一个问题,就是每个要修改的属性都要写入到行内样式中,这样很不好,

那么我们有什么办法可以获取到头样式和css的样式,而不要一定要把样式写入行内样式中呢?

IE有ele.currentStyle[attr]   DOM 有 getComputedStyle(ele,false)[attr]

attr不只width ,height等,还有很多fontSize ,left ````

 function getStyle(obj,attr){
if(obj.currentStyle){//IE
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}

  那么实现我们的功能就可以

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取样式</title>
<style>
.animation{
background-color: green;
height: 200px;
width: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="test" class="animation" ></div>
</body>
<script type="text/javascript">
window.onload = function(){
var ele = document.getElementById("test"),
timer = null; ele.onmouseover = function(){
startAnimation();
} function startAnimation(){
clearInterval(timer);
var _ele = document.getElementById("test");
timer = setInterval(function(){
//_ele.style.width = _ele.offsetWidth -1 +'px';//1 offsetWidth = width + padding + border
//onsole.log(_ele.style.width);//2 当width不写入行内style="width:200px"中的话,定义在css文件中,获取不到width
//_ele.style.width = parseInt(_ele.style.width) - 1 +'px';//3 offsetWidth = width + padding + border
_ele.style.width = parseInt(getStyle(_ele,'width')) - 1 +'px';//3 offsetWidth = width + padding + border
},100)
} function getStyle(obj,attr){
if(obj.currentStyle){//IE
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
} }
</script>
</html>

  

js动画之获取元素属性的更多相关文章

  1. JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性)

    JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...

  2. JS中获取元素属性的逆天大法

    给大家聊下js中获取元素属性的逆天大法,胆小慎入,切记切记!!! innerHTML.outerHTML.innerText .outerText.value.text().html(),val() ...

  3. JQ方法实用案例///鼠标移动到div和修改ipt中弹窗、CSS鼠标变小手、JQ获取元素属性、JQ选择器

    今天学习了jQ,jQ对js的帮助很大,菜鸟教程上也有属性.可以查看 js 和 jquery主要的区别 在 dom    想用jquery  必须先引入(顺序问题)        先css 再js:   ...

  4. 原生JS与JQ获取元素的区别

    刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定 ...

  5. UI自动化之特殊处理四(获取元素属性\爬取页面源码\常用断言)

    获取元素属性\爬取页面源码\常用断言,最终目的都是为了验证我们实际结果是否等于预期结果 目录 1.获取元素属性 2.爬取页面源码 3.常用断言 1.获取元素属性 获取title:driver.titl ...

  6. appium+python自动化:获取元素属性get_attribute

    使用get_attribute()获取元素属性,括号里应该填写什么? 查看appium源码 如果是获取resource-id,填写resourceId self.driver.find_element ...

  7. JS获取元素属性

    <style> *{ box-sizing: border-box; } html, body { margin: 0px; width: 100%; height: 100%; over ...

  8. JS获取元素属性和自定义属性

    获取元素的属性分为两种类型: 1-获取元素常见的属性(class,id,type,value……) 2-获取自定义的元素的属性(data-value,data-mess…….) 获取元素的属性,设置元 ...

  9. js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140 ...

随机推荐

  1. ueditor .net版本上传图片功能配置

    1.官网下载 UEditor .Net最新版:官方网址:http://ueditor.baidu.com/website/download.html#ueditor   UTF-8版 和GBK版选择疑 ...

  2. 动态加载框架DL分析

    动态加载框架DL分析 插件化开发,主要解决三个问题1.动态加载未安装的apk,dex,jar等文件2.activity生命周期的问题,还有service3.Android的资源调用的问题 简单说一下怎 ...

  3. Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数:  ...

  4. 重写toString()方法来描述一个类

    package com.zch.test; /* toString方法以及重写toString方法 toString方法是一个自我描述方法 方法本身返回的是该对象的实现类的 类名 + @ + hash ...

  5. Oracle转MySQL

    1. to_date 直接去掉 例如 select log.id from CM_LOGINLOG log  where log.orgid =?  and log.isAuto =?  and lo ...

  6. k.APR通道特殊配置

    APR/native specific configuration The following attributes are specific to the APR/native connector. ...

  7. [ubunut]打造Ubuntu下Java开发环境 (转)

    http://www.cnblogs.com/wufengtinghai/p/4542366.html 遇到困难: A Java Runtime Environment (JRE) or Java D ...

  8. 机器学习之KNN算法思想及其实现

    从一个例子来直观感受KNN思想 如下图 , 绿色圆要被决定赋予哪个类,是红色三角形还是蓝色四方形?如果K=3,由于红色三角形所占比例为2/3,绿色圆将被赋予红色三角形那个类,如果K=5,由于蓝色四方形 ...

  9. Bootstrap网格系统

    一.网格系统 响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 二.基本结构 <div class="container"> &l ...

  10. css 分享之background-attachment 属性

    微分享才发现的css背景图达到的效果代码属性: background-attachment -- 定义背景图片随滚动轴的移动方式: 值 描述 scroll 默认值.背景图像会随着页面其余部分的滚动而移 ...