IE及firefox下获取及设置样式值的代码

 更新时间:2010年03月23日 17:28:12   作者:  
废话少说,直接上Code,对IE与FF下的差异,均在代码中有相关的注解
复制代码 代码如下:

<script type="text/javascript">
//<![CDATA[
function $(obj)
{
return document.getElementById(obj);
}
function getStyle(obj,styleName)
{
if(obj.currentStyle) //for ies
{
return obj.currentStyle[styleName]; //注意获取方式
}
else //for others
{
return document.defaultView.getComputedStyle(obj,null).getPropertyValue(styleName);
//return document.defaultView.getComputedStyle(obj,null)[styleName];
}
}
$('btnGetClick').onclick=function()
{
//直接写在tag上的为内嵌样式、写在head-style里的为内部样式、link引入的为外部样式
//内嵌样式,可以通过Dom.style.样式名称获取,需要注意的是样式名称是驼峰格式
//内部样式和外部样式通过style.样式名称是无法获取到的,需要通过currentStyle || getComputedStyle来获取
//其实,这很好理解,内嵌样式的时候,tag具有style属性(该属性值返回的是object对象),那我们就可以通过style.样式名称来获取
//而内部或外部时,虽有style属性,但相应的值为空,所以就只有通过currentStyle || getComputedStyle来获取
//alert($('div2').style); 可以看到,弹出的结果为object,说明style是存在的,只是其下的相应样式设置为空而已。
$('testContent').innerHTML='';
var str=$('div').style.styleFloat || $('div').style.cssFloat; //因为float是保留词,因此,不能再 style.float,而用ies:styleFloat , ff:cssFloat
str=str+($('div').style.width+'<br />');
str=str+($('div2').style.width+' <br />'); //这一段无法获取到内部样式,显示空值,但并不是说style不存在
str=str+($('div2').width+' <br />'); //返回undefined,因为没有为div2的dom设置width属性
str=str+getStyle($('div2'),'width'); //div2的样式是通过内部样式提供,因此通过currentStyle || getComputedStyle来获取
$('testContent').innerHTML=str;
}
$('btnUpdateClick').onclick=function()
{
//设置样式时,不管是内嵌、内部还是外部,反正这3种方式,都可以获取到style属性(对象)
//那就可以通过它为元素设置样式,设置样式的办法有以下3种
$('div').style.width='200px';
$('div2').style.width='100px';
$('div').style.cssText='background:blue;color:red;font-weight:bold;'; //将覆盖原来的定义,相当于定义 style="background:blue;font-size:red;font-weight:bold;"
$('div2').className='testClassName'; //相当于设置 <div class="testClassName" />
}
//]]>
</script>

演示代码:

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

相关文章

  • JS在Array数组中按指定位置删除或添加元素对象方法示例

    JS在Array数组中按指定位置删除或添加元素对象方法示例

    这篇文章主要给大家介绍了关于JS在Array数组中按指定位置删除或添加元素对象的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-11-11
  • JS支持带x身份证号码验证函数

    JS支持带x身份证号码验证函数

    身份证号码验证-支持新的带x身份证
    2008-08-08
  • 微信小程序picker选择器获取值的2种方法示例

    微信小程序picker选择器获取值的2种方法示例

    picker为用户提供了多个选择,用户选了其中一种,但仍是需要有东西去告诉后台用户选了什么,下面这篇文章主要给大家介绍了关于微信小程序picker选择器获取值的2种方法,需要的朋友可以参考下
    2023-03-03
  • javascript实现瀑布流动态加载图片原理

    javascript实现瀑布流动态加载图片原理

    这篇文章主要为大家详细介绍了javascript实现瀑布流动态加载图片原理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • FF和IE之间7个JavaScript的差异

    FF和IE之间7个JavaScript的差异

    尽管 JavaScript 历史上使用冗长而令人生厌的代码块来标的特定浏览器的时期已经结束了,但是偶尔使用一些简单的代码块和对象检测来确保一些代码在用户机器上正常工作依然是必要的。
    2009-05-05
  • javascript实现可改变滚动方向的无缝滚动实例

    javascript实现可改变滚动方向的无缝滚动实例

    无缝滚动在制作一些图片展示的时候还是蛮有用的,下面与大家分享下javascript实现的可改变滚动方向的无缝滚动,具体实现如下,感兴趣的朋友可以参考下哈
    2013-06-06
  • JavaScript实现两个数组的交集

    JavaScript实现两个数组的交集

    这篇文章主要介绍了JavaScript实现两个数组的交集,给定两个数组 ​​nums1​​​和​​nums2​​返回它们的交集,输出结果中的每个元素一定是唯一的,下文详细介绍,需要的小伙伴可以参考一下
    2022-03-03
  • webuploader实现上传图片到服务器功能

    webuploader实现上传图片到服务器功能

    这篇文章主要为大家详细介绍了webuploader实现上传图片到服务器功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • webpack文件打包错误异常

    webpack文件打包错误异常

    这篇文章主要介绍了webpack文件打包错误异常,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-07-07
  • 浅谈JS for循环中使用break和continue的区别

    浅谈JS for循环中使用break和continue的区别

    这篇文章主要介绍了浅谈for循环中使用break和continue的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07

最新评论