`
guoyiqi
  • 浏览: 1009669 次
社区版块
存档分类
最新评论

currentStyle IE和ff 获取外联样式(转自:http://hi.baidu.com/aganle/blog/item/86109bcf27d2b70b93457e41.html)

 
阅读更多

IE及OP可使用currentStyle,具体用法可参考《DHTML手册》
Firefox等浏览器可以使用下面的方式来获取

window.getComputedStyle(element,'').getPropertyValue(stylevalue);

注意这2中方式都是只读的。

于是写了个公用的函数:

functiongetStyle(ele,value){/*----- 获取元素的真实style -----*/
varrs;
if(ele.style[value]){
rs=ele.style[value];
}elseif(window.getComputedStyle){
value=value.replace(/([A-Z])/g,"-$1");
rs=window.getComputedStyle(ele,'').getPropertyValue(value);
if(value=='color'){rs=colorToHex(rs);}//格式化color为16进制表示
}elseif(ele.currentStyle){
rs=ele.currentStyle[value];
}else{
returnnull;
}
returnrs;
}

但各浏览器获取color的值不同(ff/sa为rgb值,op为十六进制值,currentStyle获取的是css里面的原始有效值)
因此需要对color值进行转换(十六进制表示,无法格式化预命名颜色):

functioncolorToHex(color){/*----- 以十六进制格式化style中的color,无法格式化预命名颜色 -----*/
varrgb=/rgb/((/d{1,3}),(/s)*(/d{1,3}),(/s)*(/d{1,3})/)/;//rgb正则,结果序数为1、3、5
varnoun=/^/w+/;//预命名颜色正则
varrs;
if(rgb.test(color)){
varrgbfix=rgb.exec(color);
varr,g,b;
r=parseInt(rgbfix[1]).toString(16);
g=parseInt(rgbfix[3]).toString(16);
b=parseInt(rgbfix[5]).toString(16);
rs='#'+(r<10?'0'+r:r)+(g<10?'0'+g:g)+(b<10?'0'+b:b);
}else{
rs=color;
}
if(rs.length==4&& !noun.test(rs)){rs=rs+rs.split('#')[1]}//修正简写的十六进制,采取length判断方式
returnrs;
}

5.23
修正getPropertyValue方法获取类似于paddingLeft的值的问题
优化效率:有style属性定义时优先取style的值、color值修正仅在getComputedStyle取值时进行

分享到:
评论

相关推荐

    JavaScript Table行定位效果

    给tr设置relative后就能相对table定位了,看来很简单啊,但问题是这个方法ie8和ff都无效,而且存在很多问题,所以很快就被抛弃了。 ps:该效果用来做tr的拖动会很方便。 接着想到的是给table插入一个新tr,克隆原来...

    【JavaScript源代码】JavaScript style对象与CurrentStyle对象案例详解.docx

    - `CurrentStyle` 对象用于获取元素的最终样式,包括内部样式、外部样式和内联样式,并考虑了 CSS 的层叠规则。 - 在现代浏览器中推荐使用 `window.getComputedStyle()` 方法来代替 `CurrentStyle` 对象,以确保跨...

    JavaScript帮助文档2

    #### 五、IE vs FF: style 和 currentStyle 不同浏览器对于获取CSS样式的API支持有所不同。Internet Explorer (IE) 和 Firefox (FF) 之间的差异如下: - **IE**: 组件对象的`style`属性只能获取内联样式;为了获取...

    javascript获取隐藏元素(display:none)的高度和宽度的方法

    js获取可见元素的尺寸还是比较方便的,这个可以直接使用这个方法: 代码如下:function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM,设置参数:元素对象、样式特性 return obj.currentStyle...

    解决ie6的定位问题 position fiexed

    ### 解决IE6中的定位问题:Position Fixed 在早期的Web开发中,Internet Explorer 6(简称IE6)因其浏览器兼容性问题而臭名昭著。其中一个常见的问题是`position: fixed;`属性在IE6中不起作用。这使得开发者很难...

    JS在IE和FF中的兼容性问题

    JavaScript(简称JS)是一种广泛应用于Web开发的脚本语言,它在不同的浏览器中可能存在兼容性问题,特别是Internet Explorer(IE)和Firefox(FF)之间。这两个浏览器对JS的实现方式有所不同,导致某些特性或功能在...

    getComputedStyle与currentStyle获取样式(style/class)

    本文主要讨论两种主要的方法:`getComputedStyle` 和 `currentStyle`,它们用于获取元素的CSS样式信息,特别是那些通过class属性引用的外部样式表中的样式。 1. `getComputedStyle` 是一个DOM全局方法,主要在非IE...

    获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)

    可是DOM.style这种写法只能访问...其中 IE中这个对象叫做currentStyle,FF中这个对象叫做document.defaultView。我将这两个类打包了一下,做了一个用于访问 样式信息的函数,如下: 代码如下: //=====================

    dede建站标签大全

    DedeCMS提供了丰富的标签供用户调用和展示网站内容,使得网站的建设和维护变得更为简单。下面我们将逐个介绍这些标签的用途和用法。 1. **关键描述调用标签**: - `&lt;meta name="keywords" content="{dede:field ...

    织梦标签.pdf

    《织梦标签.pdf》主要介绍了织梦内容管理系统(DedeCMS)中常用的一些标签,这些标签在构建网站模板和管理内容时起到关键作用。DedeCMS 是一款基于PHP和MySQL的技术平台,它提供了丰富的标签系统,让开发者可以方便...

    javascript获取非行间样式的方法

    JavaScript 获取非行间样式的方法是我们在编程中常常遇到的需求,特别是在动态操作页面样式时。非行间样式,也称为内部样式或外部样式,通常存储在CSS文件中或者定义在`&lt;style&gt;`标签内,而非直接写在HTML元素的`...

    58种标签调用DedeCMS5.6标签调用总汇[文].pdf

    {dede:channel type='top' row='8' currentstyle="&lt;li class='thisclass'&gt;&lt;a href='~typelink~'&gt;~typename~&lt;/a&gt; &lt;/li&gt;"} 标签可以用来调用栏目导航,实现网站的栏目导航功能。 指定调用栏目标签 {dede:onetype ...

    dedecms标签调用.docx

    - `{dede:channel type=top row=8 currentstyle=li class=thisclass ...}`:调用顶级栏目的导航链接,`row`参数指定显示的栏目数量,`currentstyle`用于设置当前栏目样式。 5. **指定栏目标签**: - `{dede:one...

    javascript获取隐藏元素(display-none)的高度和宽度的方法.docx

    ### JavaScript 获取隐藏元素 (display: none) 的高度和宽度的方法 #### 一、问题背景与需求分析 在前端开发过程中,经常会遇到需要获取隐藏元素尺寸的情况。这些元素可能因为某些逻辑原因被设置为 `display: none...

    dede标签大全.doc

    * 栏目导航调用标签:&lt;li&gt;&lt;a href='{dede:global.cfg_cmsurl/}/'&gt;首页&lt;/a&gt;&lt;/li&gt;{dede:channel type='top' row='8' currentstyle='&lt;li class='thisclass'&gt;&lt;a href='~typelink~'&gt;~typename~&lt;/a&gt; &lt;/li&gt;'}&lt;li&gt;&lt;a href='...

    javascript针对DOM的应用分析(三).docx

    例如,对于内部样式表`&lt;style&gt;#dom{...}&lt;/style&gt;`,在IE和Firefox中获取高度的方法不同: ```javascript var domcss = document.styleSheets[0].cssRules || document.styleSheets[0].rules; var a = domcss[0]....

    JavaScript 图片滑动切换效果

    原理就是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果。 首先需要一个容器,程序会自动设置容器overflow为hidden,如果不是相对或绝对定位会同时设置position为relative, 滑动...

Global site tag (gtag.js) - Google Analytics