js计算机样式window.getComputedStyle(ele,null)2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window.getComputedStyle(div,null)</title>
<style type="text/css">
*{margin:0;padding:0}
</style>
</head>
<body>
<div style="width: 100px; height: 100px; background: red; position: absolute;left: 0; top:0"></div>
<script type="text/javascript">
//封装
function getStyle(elem,prop){
if(window.getComputedStyle){ //如果它存在的话(兼容谷歌)
return window.getComputedStyle(elem,null)[prop];//prop作为参数字符串传进来，所有得中括号
}else{
return elem.currentStyle[prop]; //兼容IE
}
}
var timer;
var div = document.getElementsByTagName('div')[0]
timer=setInterval(function(){
div.style.left=parseInt(getStyle(div,'left'))+1+"px";//注意：getStyle(div,'left')打印出来是0px,所以用parseInt取整数
},10)
div.onclick = function() {
clearInterval(timer)
}
</script>
</body>
</html>
效果图：
js计算机样式window.getComputedStyle(ele,null)2的更多相关文章
- js计算机样式window.getComputedStyle(ele,null)与
一.getComputedStyle兼容IE8以上,范户籍的计算样式的值都是绝对值,没有相对单位(如:width:10em; 它打印出来是160px) window.getComputedStyle( ...
- 关于obj.currentStyle.property、window.getComputedStyle(obj,null).property、obj.style.property的理解
首先是obj,style.property 我一直用这个obj.style.property这个属性来修改内联和外联的obj属性,但是从网上看到了obj.style.property居然只能读取内嵌的 ...
- 兼容获取元素当前样式 currentStyle || getComputedStyle
function getStyle(ele, attr) { return ele.currentStyle ? ele.currentStyle[attr] : window.getComputed ...
- 原生js获取样式
js中的获取样式是在是让人头疼,为了方便兼容多个浏览器,把设置样式封装成一个函数. 函数如下: function getStyle(element, property) { var value = e ...
- window,getComputedStyle，letter-spacing
js 拿到element的css样式 window.getComputedStyle(ele,[pseuso) 比如想拿到一个element的背景色 window.getComput ...
- window.getComputedStyle()方法的使用及其扩展
1.window.getComputedStyle()方法返回值 是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CSSStyleDeclaratio ...
- JS获取样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS 操作样式 style
1. 任何支持 style 特性的 HTML 元素在 JavaScript 中都对应着有一个 style 属性,指向一个 CSSStyleDeclaration 的一个实例对象,包含该元素的内嵌sty ...
- 总结js(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作
http://hi.baidu.com/yashua839/blog/item/131fdb2fe547ef221f3089af.html一.Iframe 篇 //&&&&am ...
随机推荐
- windows版mongodb不知道安装在哪儿
情景还原: 从官网:点击打开链接 下载了 MongoDB-win32-x86_64-2.6.12-signed.msi文件后, 右键安装,各种Next后,没有选择路径,就安装结束了!! 任务管理器里面 ...
- Ubuntu设置开机启动服务
一.查看当前的运行级别 runlevel 二.加载服务 $ cd /etc/init.d $ sudo update-rc.d test defaults 95 三.增加默认启动脚本 sudo vi ...
- java命令查询属性信息
System.getProperty("user.home")可以查询JAVA系统的user.home属性的值, 除了user.home,还有user.dir, file.sepa ...
- linux系统的命令组与函数
一.命令组 许多时候,我们在shell操作上,需要在一定条件下一次执行多个命令,也就是说,要么不执行,要么就全执行,而不是每次依序的判断是否要执行下一个命令.或是,需要从一些命令执行优先次顺中得到豁免 ...
- 8-机器分配(hud4045-组合+第二类斯特林数)
http://acm.hdu.edu.cn/showproblem.php?pid=4045 Machine schedulingTime Limit: 5000/2000 MS (Java/Othe ...
- SpringBoot集成freemarker和thymeleaf模板
1.在MAVEN工程POM.XML中引入依赖架包 <!-- 引入 freemarker 模板依赖 --> <dependency> <groupId>org.spr ...
- 粗略了解fill与fill_n
以前只知道数组赋值时用memset(): 而这几天却了解到了一个函数:fill(); 感觉以后会有用吧... std::fill template <class ForwardIterator, ...
- 一张图让你看懂HDMI针脚定义
一张图让你看懂HDMI针脚定义 摘自:http://www.hdmiaoc.com/cjwt-175.html 什么是HDMI线,HDMI插头的每根PIN脚是什么意思? 大部分使用HDMI标准的研发及 ...
- [原创]SOUI GDI+渲染引擎下的字体特效，抛砖引玉
由于SOUI是一种双渲染引擎的DUI库,默认在SKIA渲染引擎下是支持特效字体的,具体请参考DEMO中的源码. 但是使用GDI+渲染时是没有这些特效的,着实比较苦恼,此代抛砖引玉,细节实现 请自己再去 ...
- 在IIS和Nginx上通过代理部署基于ant-design-pro前端框架开发的应用
一.本文解决的主要问题 通过对前端静态资源站点进行代理服务设置,实现对后端API接口的代理,从而实现前端的独立部署,即通过代理的设置实现对http://IP0:Port0/api/xxx的请求转发至h ...