问题:在js动画中,如果元素设置了border,padding等,获取到的样式是盒子的样式,这样会影响动画的正常显示。

    

解决方案一:在元素的行内添加样式  如

<div style="width=200px">

<div>

解决方案二:通过getstyle()方法获取样式

<script type="text/javascript">
//哪个元素
//哪个样式 function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj, false)[attr];
}
} window.onload=function ()
{
var oDiv=document.getElementById('div1'); alert(getStyle(oDiv, 'backgroundColor'));
}
</script> <div id="div1"></div> //获取样式简洁版
function getStyle(obj, attr) {
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}
//opacity 设置透明度
function setOpacity(elem, value) {
elem.filters ? elem.style.filter = 'alpha(opacity=' + value + ')' : elem.style.opacity = value / 100;
} //完美版
function css(obj, attr, value){
switch (arguments.length){
case 2:
if(typeof arguments[1] == "object"){
for (var i in attr) i == "opacity" ? (obj.style["filter"] = "alpha(opacity=" + attr[i] + ")", obj.style[i] = attr[i] / 100) : obj.style[i] = attr[i];
}else{
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]
}
break;
case 3:
attr == "opacity" ? (obj.style["filter"] = "alpha(opacity=" + value + ")", obj.style[attr] = value / 100) : obj.style[attr] = value;
break;
}
};

  

getstyle() 获取样式的更多相关文章

  1. (转载)记录函数 getStyle() 获取元素 CSS 样式

    设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...

  2. 兼容的获取样式的函数getStyle()

    想要得到某个元素的某个样式属性,可以用: <div id="div01" style="color:red">123</div> var ...

  3. style设置/获取样式的问题 和 offsetWidth/offsetHeight的问题

    style设置/获取样式的问题:1.js通过style方法    --加样式:加的是行间样式 oDiv.style.width="20"+'px';    --取样式:取得是行间样 ...

  4. JS之获取样式

    基本代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  5. 原生js获取样式

    js中的获取样式是在是让人头疼,为了方便兼容多个浏览器,把设置样式封装成一个函数. 函数如下: function getStyle(element, property) { var value = e ...

  6. 利用原生JavaScript获取样式的方式小结

    来源:http://www.ido321.com/930.html ps:是获取样式,不是设置样式.若没有给元素设置样式值,则返回浏览器给予的默认值.(论坛整理) 1.element.style:只能 ...

  7. js如何获取样式?

    在某个项目中,我们经常会需要来获取某个元素的样式,比如说获取一个div的color:这样,新的问出现了, var style = box.style.width;console.log(style); ...

  8. JS获取样式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. getComputedStyle与currentStyle获取样式

    转载自:https://segmentfault.com/a/1190000007477785 CSS的样式分为三类: 内嵌样式:是写在标签里面的,内嵌样式只对所在的标签有效内部样式:是写在HTML里 ...

随机推荐

  1. Quick Cocos2dx MVC初步

    今天看到了自己之前两年前写的一个地图编辑器, 写了不到一半就放弃了, 但是还是github上的小伙伴fork了, 真的感觉对不起那位伙计, 同时也鄙视一下一直以来懒得要死的自己, 希望这个demo不要 ...

  2. openstack名称发音收集

    MariaDB:    maria['mɛərɪr] Corosync:    coro[kə'roʊ]    sync[sɪŋk] pacemaker:    [ˈpesˌmekɚ] galera: ...

  3. c#之从服务器下载压缩包,并解压

    项目的配置文件为了和服务器保持一致,每次打包时都从网上下载配置文件,由于下载的是zip压缩包,还需要解压,代码如下: using ICSharpCode.SharpZipLib.Zip; using ...

  4. HTML学习一(入门了解)

    基础部分---------------------------------一:简介HTML 是用来描述网页的一种语言.HTML 指的是超文本标记语言 (Hyper Text Markup Langua ...

  5. hellocharts-android开源图表库(效果非常好)

    泡在网上的日子 发表于 2014-11-07 12:28 第 33156 次阅读 chart 2 编辑推荐:稀土掘金,这是一个高质量的技术干货分享社区,web前端.Android.iOS.设计资源和产 ...

  6. 学习vi(1)

    原文地址:http://www.gentoo.org/doc/zh_cn/vi-guide.xml#doc_chap2 1.  新手上路 介绍 本教程将会向你展示如何使用vi──一个强大的可视化编辑器 ...

  7. iOS开发之指纹解锁

    http://blog.csdn.net/hongfengkt/article/details/49868073 前一阵子一直在赶项目进度,没有太多时间写博客,现在终于空闲了,将以前欠下的博客补上来. ...

  8. [TJOI2013]单词

    2755: [TJOI2013]单词 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 6  Solved: 3[Submit][Status][Web B ...

  9. CABasicAnimation 基本动画 分类: ios技术 2015-07-16 17:10 132人阅读 评论(0) 收藏

    几个可以用来实现热门APP应用PATH中menu效果的几个方法 +(CABasicAnimation *)opacityForever_Animation:(float)time //永久闪烁的动画 ...

  10. 阿里CEO张勇:阿里蚂蚁20亿元扶持开发者

    https://bbs.taobao.com/catalog/thread/508895-318032179.htm?spm=a21bo.7724922.8439-0.2.tkjSOl 阿里CEO张勇 ...