JS getStyle获取最终样式函数代码

代码如下:

#flower {
width:100px;
font-size:12px;
float:left;
opacity:0.5;
filter:alpha(opacity=50);
}

定义一个id="flower"的div元素 并设置如上样式,我们的目标就是通过javascript来获取样式的最终属性
<div id="flower" >...</div>
getStyle函数:
这里用到了三个原型扩展
String.prototype.capitalize 这个方法是让字符串首字母大写
Array.prototype.contains 判断数组中是否有指定成员
String.prototype.camelize 这个是让"font-size" 字符串转换成 "fontSize" 这样的格式用来获取样式


代码如下:

String.prototype.capitalize=function(){
return this.charAt(0).toUpperCase() + this.substring(1).toLowerCase();
}
Array.prototype.contains=function(A){
return (this.indexOf(A) >= 0);
}
String.prototype.camelize=function(){
return this.replace(/\-(\w)/ig,
function(B, A) {
return A.toUpperCase();
});
}
var css={
getStyle:function(elem,styles){
var value,
elem=document.getElementById(elem);
if(styles == "float"){
document.defaultView ? styles = 'float' /*cssFloat*/ : styles='styleFloat';
}
value=elem.style[styles] || elem.style[styles.camelize()];
if(!value){
if (document.defaultView && document.defaultView.getComputedStyle) {
var _css=document.defaultView.getComputedStyle(elem, null);
value= _css ? _css.getPropertyValue(styles) : null;
}else{
if (elem.currentStyle){
value = elem.currentStyle[styles.camelize()];
}
}
}
if(value=="auto" && ["width","height"].contains(styles) && elem.style.display!="none"){
value=elem["offset"+styles.capitalize()]+"px";
}
if(styles == "opacity"){
try {
value = elem.filters['DXImageTransform.Microsoft.Alpha'].opacity;
value =value/100;
}catch(e) {
try {
value = elem.filters('alpha').opacity;
} catch(err){}
}
}
return value=="auto" ? null :value;
}
}
css.getStyle("flower","width"); //100px;
css.getStyle("flower","font-size");//12px;
css.getStyle("flower","float");//left
css.getStyle("flower","opacity");//0.5

先回顾下基础
style 标准的样式！可能是由style属性指定的！
runtimeStyle 运行时的样式！如果与style的属性重叠，将覆盖style的属性！
currentStyle 指 style 和 runtimeStyle 的结合！
style 内联的样式
currentStyle 代表了在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式
runtimeStyle 代表了居于全局样式表、内嵌样式和 HTML 标签属性指定的格式和样式之上的对象的格式和样式
(FF中没有currentStyle 和runtimeStyle)
getStyle(元素id,获取属性);
获取元素style标签内的样式
elem.style[styles] || elem.style[styles.camelize()]
支持传入"font-size"的写法
但这并不是最终的样式 .
获取最终样式 有两终办法 一个是
document.defaultView.getComputedStyle //w3c的方法
还有就是通过 elem.currentStyle["..."] //ie下的方法
currentStyle 方法 需要将带"-"字符的属性 需要通过String.prototype.camelize转换成ie可识别的属性


代码如下:

if(value=="auto" && ["width","height"].contains(styles) && elem.style.display!="none"){
value=elem["offset"+styles.capitalize()]+"px";
}

当 css中定义 元素的宽度为 auto时，并不能获取元素的最终宽度是多少，我们可以用 offsetWidth 和 offsetHeight 获取实际值
当然前提是要在元素为"可见"的状态下!


代码如下:

try {
value = elem.filters['DXImageTransform.Microsoft.Alpha'].opacity;
value =value/100;
}catch(e) {
try {
value = elem.filters('alpha').opacity;
} catch(err){}
}

这是获取透明度的方法,ie中定义透明度和其他浏览器不同.需把通过滤镜得到的opacity值/100。返回标准的opacity值(范围0-1);

赞 (0)

相关推荐

  • js 获取浏览器版本以此来调整CSS的样式

    1.在web开发中,会经常让你判断当前使用的是那个浏览器及浏览器的那个版本,根据浏览器版本来调整CSS的样式, 使在web界面在各个浏览器展现达到最佳的效果,下面是获取当前浏览器的代码: 复制代码 代码如下: getBrowserVersion:function(){ var agent = navigator.userAgent.toLowerCase(); var arr=[]; var Browser=""; var Bversion=""; var veri

  • 点击button获取text内容并改变样式的js实现

    点击button获取text内容并改变样式的js实现

    需求:点击button获得input框中选中的内容,让选中的内容变红, 实现:代码如下 <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Test</title> <style type="text/css">

  • JS获取页面input控件中所有text控件并追加样式属性

    如题,将使用jquery来在页面加载时获取页面input控件中所有text控件并添加样式. 以前写过的页面上所使用的text控件width属性太小需要改动,改动牵扯页面上所有text的属性,改动每个控件的width感觉会很麻烦,所以就想通过在页面加载的时候将要改动的text找到并添加属性. 首先先写了一个css样式: 复制代码 代码如下: .wid { width:205px; } 在页面加载中所写的代码如下: $("input[type=text]").addClass("

  • 获取内联和链接中的样式(js代码)

    复制代码 代码如下: var head = document.getElementById( "box" ); // alert( head.style.background ) // alert( head.style.cssFloat || head.style.styleFloat ) // 获取float不一样 // head.style.fontSize = "30px" head.style.color = "#f00"; // (t

  • js获取元素外链样式的方法

    本文实例讲述了js获取元素外链样式的方法.分享给大家供大家参考.具体分析如下: 一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可document.getElementById("div1").style.width来获取或设置.但是如果样式是在外链link中的或者是页面的非行内样式,就获取不到了. 在标准浏览器中可以通过window.ge

  • js 获取计算后的样式写法及注意事项

    currentStyle 1.复合样式:currentStyle取不到 例:background.margin 2.取默认样式 3.只能读 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>获取计算后的样式</title> <style type=&qu

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

    可是DOM.style这种写法只能访问<DOM style=""></DOM>,这样在标签里内置的样式,如果样式写在<style type="text/css"></style>,或者.css文件里,那么就办法读到样式了. 其实呢,还有别的方法可以读到这些样式信息,方法有两种,一种是通过document.styleSheets对象,另一种是通过"最终样式"对象.其中 IE中这个对象叫做current

  • js正确获取元素样式详解

    在说js获取元素样式之前,简单地谈一下样式 样式分三种 外部样式 External Style Sheet 以CSS为扩展名的文件(又称为"超文本样式表"文件),它的作用范围可以是多张网页,或整个网站,甚至不同的网站.与网页链接后,才能应用. 嵌入式样式 internal Style Sheet 包含在网页内部的样式设置,它的作用范围仅限于嵌入的网页. 内联式样式 inline Style 在HTML文档中,内联式样式表的格式化信息直接插入所应用的网页元素的HTML标签中,作为其HTM

  • JS getStyle获取最终样式函数代码

    复制代码 代码如下: #flower { width:100px; font-size:12px; float:left; opacity:0.5; filter:alpha(opacity=50); } 定义一个id="flower"的div元素 并设置如上样式,我们的目标就是通过javascript来获取样式的最终属性 <div id="flower" >...</div> getStyle函数: 这里用到了三个原型扩展 String.p

  • 解析js如何获取css样式

    一.获取内联样式 <div id ="myDiv" style="width:100px;height:100px;background-color:red; border:1px solid black;"></div> <script> var myDiv = document.getElementById("myDiv"); alert(myDiv.style.width);//100px alert(m

  • ASP通用分页样式函数代码

    <% '****************************** '函数:MultiPage(Numbers,Perpage,Curpage,Url_Add) '参数:Numbers,总记录数:Perpage,每页记录数:Curpage,当前页:Url_Add,当前页其它参数如?action=list& '作者:阿里西西 '日期:2007/7/15 '描述:ASP通用分页样式函数 '示例:MultiPage(100,10,2,"?action=list&")

  • javascript 获取url参数和script标签中获取url参数函数代码

    url paramter: 复制代码 代码如下: //lastest: var getArgs=function() {//get url querystring var params=document.location.search,reg=/(?:^\?|&)(.*?)=(.*?)(?=&|$)/g,temp,args={}; while((temp=reg.exec(params))!=null) args[temp[1]]=decodeURIComponent(temp[2]);

  • js substr支持中文截取函数代码(中文是双字节)

    复制代码 代码如下: <script language="JavaScript"> //得到字符总数function getChars(str) { var i = 0; var c = 0.0; var unicode = 0; var len = 0; if (str == null || str == "") {  return 0; } len = str.length; for(i = 0; i < len; i++) {   unico

  • js 封装cookie操作的函数代码

    核心代码: 复制代码 代码如下: var cookie={ setCookie:function (name, value, iDay) { var oDate = new Date(); oDate.setDate(oDate.getDate()+iDay); document.cookie = name+'='+value+';expires='+oDate; }, getCookie:function (name) { var arr = document.cookie.split(';

  • js中的string.format函数代码

    源于C#中的string.Format() 复制代码 代码如下: String.prototype.format = function(args) { if (arguments.length>0) { var result = this; if (arguments.length == 1 && typeof (args) == "object") { for (var key in args) { var reg=new RegExp ("({&qu

  • PHP获取url的函数代码

    复制代码 代码如下: function geturl($url) { $ch = curl_init(); $timeout = 5; curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout); //在需要用户检测的网页里需要增加下面两行 //curl_setopt($ch, CURLOPT

  • js 数值项目的格式化函数代码

    复制代码 代码如下: //-------------------------------------------- // 删除千分点. //-------------------------------------------- function removeComma(number) { var num = number.replace(new RegExp(",","g"),""); if(/^[-+]?[0-9]+(\.[0-9]+)?$/

随机推荐