getstyle() 获取样式
问题:在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() 获取样式的更多相关文章
- (转载)记录函数 getStyle() 获取元素 CSS 样式
设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...
- 兼容的获取样式的函数getStyle()
想要得到某个元素的某个样式属性,可以用: <div id="div01" style="color:red">123</div> var ...
- style设置/获取样式的问题 和 offsetWidth/offsetHeight的问题
style设置/获取样式的问题:1.js通过style方法 --加样式:加的是行间样式 oDiv.style.width="20"+'px'; --取样式:取得是行间样 ...
- JS之获取样式
基本代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 原生js获取样式
js中的获取样式是在是让人头疼,为了方便兼容多个浏览器,把设置样式封装成一个函数. 函数如下: function getStyle(element, property) { var value = e ...
- 利用原生JavaScript获取样式的方式小结
来源:http://www.ido321.com/930.html ps:是获取样式,不是设置样式.若没有给元素设置样式值,则返回浏览器给予的默认值.(论坛整理) 1.element.style:只能 ...
- js如何获取样式?
在某个项目中,我们经常会需要来获取某个元素的样式,比如说获取一个div的color:这样,新的问出现了, var style = box.style.width;console.log(style); ...
- JS获取样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- getComputedStyle与currentStyle获取样式
转载自:https://segmentfault.com/a/1190000007477785 CSS的样式分为三类: 内嵌样式:是写在标签里面的,内嵌样式只对所在的标签有效内部样式:是写在HTML里 ...
随机推荐
- 照着例子学习 protobuf-lua
参考文章:cocos2dx使用lua和protobuf 首先得下载protobuf-gen-lua的插件,插件Git地址在此. 下载完之后进入到protoc-gen-lua\plugin这个目录,并在 ...
- openstack controller ha测试环境搭建记录(十二)——配置neutron(计算节点)
在计算节点配置内核参数:vi /etc/sysctl.confnet.ipv4.conf.all.rp_filter=0net.ipv4.conf.default.rp_filter=0 在计算节点使 ...
- 下标脚本(Swift)
下标脚本 可以定义在类(Class).结构体(structure)和枚举(enumeration)这些目标中,可以认为是访问集合(collection),列表(list)或序列(sequence的快捷 ...
- 使用msm文件创建msi
一.不使用merge module的ModuleSubstitution和ModuleConfiguration 1.创建MyMsm.msm <?xml version="1.0&qu ...
- CodeForces 652A Gabriel and Caterpillar
简单模拟. #include<cstdio> #include<cstring> #include<cmath> #include<algorithm> ...
- OSD的主要实现方法和类型(转)
源:OSD的主要实现方法和类型 目前有两种主要的OSD实现方法:外部OSD发生器与视频处理器间的叠加合成;视频处理器内部 支持OSD,直接在视频缓存内部叠加OSD信息. 外部OSD发生器与视频处理器间 ...
- SpringMVC强大的数据绑定(2)——第六章 注解式控制器详解
SpringMVC强大的数据绑定(2)——第六章 注解式控制器详解 博客分类: 跟开涛学SpringMVC 6.6.2.@RequestParam绑定单个请求参数值 @RequestParam用于 ...
- UVA 11542 Square ——线性基
[题目分析] 每个数没有超过500的因子.很容易想到把每一个数表示成一个二进制的数. (0代表该质数的次数为偶数,1代表是奇数) 然后问题转化成了选取一些二进制数,使他们的异或和为0. 高斯消元,2^ ...
- IOS开发-OC学习-protocol(协议)
在OC语言中,协议是一组方法,里面有两种方法,一种是遵守这个协议的类的实例必须实现的方法,另一种是可以实现也可以不实现的方法. 例如我定义一个学生的协议,这个协议里有两个方法,其中一个是必选的方法:学 ...
- js盒子模型
1.js盒子模型 指的是通过js中提供的一系列的属性和方法,获取页面中元素的样式信息值 例: #box有很多自己的私有属性: HTMLDivElement.prototype->HTMLElem ...