javascript-Javascript获取有CSS动画的标签的属性值

问题描述

Javascript获取有CSS动画的标签的属性值

//CSS中的动画:
@keyframes move{
0% {left:0px;}
100% {left:100px;}
}
//CSS样式:
.move1{
width:100px;
height:100px;
animation:move 1000ms;
-webkit-animation:move 1000ms
}
//div标签:
div id="1" class="move1"


或者
.move2{
width:100px;
height:100px;
transform:translate(100px,0px); /*x轴移动100px,y轴0px*/
-webkit-transform:translate(100px,0px);
transition: transfrom 1s;
-webkit-transition: -webkit-transform 1s;
}
//div标签:
div id="1" class="move2"


请问我该如何在Javascript中获取div标签在动画移动中的left属性?

直接documen.getElementById("1").style.left不行

webkit内核不支持currentStyle,getComputedStyle还没有试

CSS中的动画是怎么样的一个原理呢?

还请各位提供解决问题的办法或者思路


ps:我是想做一个网页上的小游戏,类似于节奏大师那种,就是一个一个方块移动到底部时按下对应的按钮完成得分,现在就是不知道怎么解决 如何知道方块到达底部 的问题

解决方案

documen.getElementById("1").style.left获取的是dom对象中css值,级联样式要用window.getComputedStyle(标准浏览器)或者currentStyle(IE低版本)
Javascript获取级联样式表中定义的CSS值

时间: 2022-12-12

javascript-Javascript获取有CSS动画的标签的属性值的相关文章

js获取页面引用的css样式表中的属性值方法(推荐)_javascript技巧

如下所示: function getStyle(node, property){ if (node.style[property]) { return node.style[property]; } else if (node.currentStyle) { return node.currentStyle[property]; } else if (document.defaultView && document.defaultView.getComputedStyle) { var s

正值表达式匹配html标签的属性值_正则表达式

正则表达式是做文本解析工作必不可少的技能.如Web服务器日志分析,网页前端开发等.很多高级文本编辑器都支持正则表达式的一个子集,熟练掌握正则表达式,经常能够使你的一些工作事半功倍.例如统计代码行数,只需一个正则就搞定.嵌套Html标签的匹配是正则表达式应用中一个比较难的话题,因为它涉及到的正则语法比较多,也比较难.因此也就更有研究的价值. 今天由于工作的需求,需要获取html标签的属性值,立即想到了正则表达式,标签如下: <circle id="ap_test" cx="

正值表达式匹配html标签的属性值

正则表达式是做文本解析工作必不可少的技能.如Web服务器日志分析,网页前端开发等.很多高级文本编辑器都支持正则表达式的一个子集,熟练掌握正则表达式,经常能够使你的一些工作事半功倍.例如统计代码行数,只需一个正则就搞定.嵌套Html标签的匹配是正则表达式应用中一个比较难的话题,因为它涉及到的正则语法比较多,也比较难.因此也就更有研究的价值. 今天由于工作的需求,需要获取html标签的属性值,立即想到了正则表达式,标签如下: <circle id="ap_test" cx="

javascript-如何获取另外一个页面button的name属性值

问题描述 如何获取另外一个页面button的name属性值 有2个页面,页面1中有一个确定按钮,现在需要在页面2中获取到页面1确定按钮的name属性值.求指导,谢谢. 解决方案 传值方式都可以传过去,协议传值,block传值,本地化存储,沙盒存储等都可以,具体可以参考一下我的博客! 解决方案二: 如果两个都是静态页面,好像不能,一般都是传值的,get,post 解决方案三: 用getdlgItem这个函数就可以 解决方案四: 包含页面,document.getitemById(); 解决方案五:

CSS和JS标签style属性对照表(方便js开发的朋友)_javascript技巧

盒子标签和属性对照 CSS语法(不区分大小写) JavaScript语法(区分大小写) border border border-bottom borderBottom border-bottom-color borderBottomColor border-bottom-style borderBottomStyle border-bottom-width borderBottomWidth border-color borderColor border-left borderLeft bor

js如何获取标签的属性值

代码形式如下: <a class="a0" id="xxoo">ggggggggggggg<span class="b0">hhhhhhhhhhhhhhhhhhhhhhhh</span></a> 想获取span标签的class属性值 获取的方法如下 : 以下是引用片段:document.getElementById("xxoo").getElementsByTagName(&qu

在CSS中用attr()显示HTML属性值

  attr()功能早在CSS 2.1标准中就已经出现,但现在才开始普遍流行.它提供了一个巧妙的方法在CSS中使用HTML标签上的属性,在很多情况下都能帮你省去了以往需要Javascript处理的过程. 要想使用这个功能,你需要用到三种元素:一个:before 或 :after CSS伪类样式, .content属性,和一个带有你想使用的HTML属性名称的attr()表达式.例如,想去显示 标题上的data-prefix属性的值,你可以写成这样: h3:before { content: att

PHP正则匹配img及标签各属性值(匹配图片函数)

例  代码如下 复制代码 <?php   $ext = 'jpg|jpeg|gif|bmp|png';//罗列图片后缀从而实现多扩展名匹配 $str = '<p><img title="湛蓝天空" alt="湛蓝天空" onload="ResizeImage(this,860)" src="http://你的域名/uploads/allimg/131121/1-1311210925190-L.jpg"

link标签-&amp;amp;lt;link href=&amp;amp;quot;a&amp;amp;quot;/&amp;amp;gt;js把href属性值清空,浏览器重新加载其他css文件

问题描述 <link href="a"/>js把href属性值清空,浏览器重新加载其他css文件 <link href="style.css"/>通过js把href属性值="",浏览器会重新加载其他css文件吗 页面:/AAA/BBB/Fire/FireEntry.aspx包含这两行代码: </link id="cssWait" href="Style.css" rel=&qu