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取值时进行
分享到:
相关推荐
给tr设置relative后就能相对table定位了,看来很简单啊,但问题是这个方法ie8和ff都无效,而且存在很多问题,所以很快就被抛弃了。 ps:该效果用来做tr的拖动会很方便。 接着想到的是给table插入一个新tr,克隆原来...
- `CurrentStyle` 对象用于获取元素的最终样式,包括内部样式、外部样式和内联样式,并考虑了 CSS 的层叠规则。 - 在现代浏览器中推荐使用 `window.getComputedStyle()` 方法来代替 `CurrentStyle` 对象,以确保跨...
#### 五、IE vs FF: style 和 currentStyle 不同浏览器对于获取CSS样式的API支持有所不同。Internet Explorer (IE) 和 Firefox (FF) 之间的差异如下: - **IE**: 组件对象的`style`属性只能获取内联样式;为了获取...
js获取可见元素的尺寸还是比较方便的,这个可以直接使用这个方法: 代码如下:function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM,设置参数:元素对象、样式特性 return obj.currentStyle...
### 解决IE6中的定位问题:Position Fixed 在早期的Web开发中,Internet Explorer 6(简称IE6)因其浏览器兼容性问题而臭名昭著。其中一个常见的问题是`position: fixed;`属性在IE6中不起作用。这使得开发者很难...
JavaScript(简称JS)是一种广泛应用于Web开发的脚本语言,它在不同的浏览器中可能存在兼容性问题,特别是Internet Explorer(IE)和Firefox(FF)之间。这两个浏览器对JS的实现方式有所不同,导致某些特性或功能在...
本文主要讨论两种主要的方法:`getComputedStyle` 和 `currentStyle`,它们用于获取元素的CSS样式信息,特别是那些通过class属性引用的外部样式表中的样式。 1. `getComputedStyle` 是一个DOM全局方法,主要在非IE...
可是DOM.style这种写法只能访问...其中 IE中这个对象叫做currentStyle,FF中这个对象叫做document.defaultView。我将这两个类打包了一下,做了一个用于访问 样式信息的函数,如下: 代码如下: //=====================
DedeCMS提供了丰富的标签供用户调用和展示网站内容,使得网站的建设和维护变得更为简单。下面我们将逐个介绍这些标签的用途和用法。 1. **关键描述调用标签**: - `<meta name="keywords" content="{dede:field ...
《织梦标签.pdf》主要介绍了织梦内容管理系统(DedeCMS)中常用的一些标签,这些标签在构建网站模板和管理内容时起到关键作用。DedeCMS 是一款基于PHP和MySQL的技术平台,它提供了丰富的标签系统,让开发者可以方便...
JavaScript 获取非行间样式的方法是我们在编程中常常遇到的需求,特别是在动态操作页面样式时。非行间样式,也称为内部样式或外部样式,通常存储在CSS文件中或者定义在`<style>`标签内,而非直接写在HTML元素的`...
{dede:channel type='top' row='8' currentstyle="<li class='thisclass'><a href='~typelink~'>~typename~</a> </li>"} 标签可以用来调用栏目导航,实现网站的栏目导航功能。 指定调用栏目标签 {dede:onetype ...
- `{dede:channel type=top row=8 currentstyle=li class=thisclass ...}`:调用顶级栏目的导航链接,`row`参数指定显示的栏目数量,`currentstyle`用于设置当前栏目样式。 5. **指定栏目标签**: - `{dede:one...
### JavaScript 获取隐藏元素 (display: none) 的高度和宽度的方法 #### 一、问题背景与需求分析 在前端开发过程中,经常会遇到需要获取隐藏元素尺寸的情况。这些元素可能因为某些逻辑原因被设置为 `display: none...
* 栏目导航调用标签:<li><a href='{dede:global.cfg_cmsurl/}/'>首页</a></li>{dede:channel type='top' row='8' currentstyle='<li class='thisclass'><a href='~typelink~'>~typename~</a> </li>'}<li><a href='...
例如,对于内部样式表`<style>#dom{...}</style>`,在IE和Firefox中获取高度的方法不同: ```javascript var domcss = document.styleSheets[0].cssRules || document.styleSheets[0].rules; var a = domcss[0]....
原理就是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果。 首先需要一个容器,程序会自动设置容器overflow为hidden,如果不是相对或绝对定位会同时设置position为relative, 滑动...