javascript 获取特定的 CSS属性值

<link id="system_style" type="text/css" href="global.css" rel="stylesheet"/> 
<div id="myArticle">
...
</div>

　　在global.css中声明了

#myArticle{
width:400px; 
height:300px;
}

　　这样的情况下，直接通过JS进行getElementById('myArticle').style.width是无法获取400px的值的，因为这个数值定义在CSS里，所以，必须要用其他方法，我写了以下函数：

/** 
* function for get the style value in special css file 
* @param int css_file_id 
* @param String labname 
* @param String param 
*/ 
function getStyleValue(css_file_id,labname,param) 
{ 
var tar; 
var rss; 
var style; 
var value;

tar = document.styleSheets[css_file_id];

rss = tar.cssRules?tar.cssRules:tar.rules

for(i=0;i<rss.length;i ) 
{ 
style = rss[i]; 
if(style.selectorText.toLowerCase() == labname.toLowerCase()) 
{ 
value = style.style[param]; 
} 
} 
return value; 
}

　　现在只要通过

getStyleValue(0,'#myArticle','width')

　　就可以获得啦：）

赞 (0)

相关推荐

  • JS获取CSS样式（style/getComputedStyle/currentStyle）

    CSS的样式分为三类: 内嵌样式:是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式:是写在HTML的里面的,内部样式只对所在的网页有效. 外部样式表:如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这 些样式(Styles)的网页里引用这个CSS文件. getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式对象([object CSSStyleDeclar

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

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

  • 用JavaScript获取网页中的js、css、Flash等文件

    作者:马健邮箱:stronghorse@tom.com主页:http://stronghorse.yeah.net版本:1.01初始发布日期:2005.08.29最后更新日期:2005.09.28 目录一.前言二.从E书或网页中获取文件的一般步骤三.从E书或网页中获取链接进来的css文件四.从E书或网页中获取链接进来的js文件五.从E书或网页中获取Flash文件六.从E书或网页中获取背景音乐文件七.从E书中获取图像文件八.进入frame页面九.其它问题 一.前言 最近我又听到有人抱怨用miniK

  • js 获取和设置css3 属性值的实现方法

    众多周知 CSS3 增加了很多属性,在读写的时候就没有原先那么方便了. 如: <div style="left:100px"></div> 只考虑行间样式的话,只需 div.style.left 就可获取,设置的时候也只需要 div.style.left='100px' 即可.很简单. 但是css3来了 如: <div style="-webkit-transform: translate(20px,-20px)"></di

  • JS使用getComputedStyle()方法获取CSS属性值

    在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如下: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属性中的值(style="-"),而无法获取定义在<style type="text/css">里面的属性. 复制代码 代码如下: <span style="font-family:Arial;font-size:14px;">

  • javascript获取元素CSS样式代码示例

    使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:100px;height:100px;"></div> 内嵌样式即写在style标签中,例如<style type="text/css">div{width:100px; height:100px}</style> 链接式即为用link标签

  • js获取某元素的class里面的css属性值代码

    js获取某元素的class里面的css属性值代码

    用js如何获取div中css的 margin.padding.height.border等.你可能说可以直接用document.getElementById("id").style.margin获取.但是你说的只能获取直接在标签中写的style的属性,无法获取标签style外的属性(如css文件中的属性).而下面方法则两者值都可以获取.实例效果图如下: js在获取css属性时如果标签中无style则无法直接获取css中的属性,所以需要一个方法可以做到这点.getStyle(obj,at

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

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

  • Javascript获取CSS伪元素属性的实现代码

    CSS伪元素非常强大,它经常被用来创建CSS三角形提示,使用CSS伪元素可以实现一些简单的效果但又不需要增加额外的HTML标签.有一点就是Javascript无法获取到这些CSS属性值,但现在有一种方法可以获取到: 看看下面的CSS代码: .element:before { content: 'NEW'; color: rgb(255, 0, 0); }.element:before { content: 'NEW'; color: rgb(255, 0, 0); } 为了获取到.element

  • javascript 获取特定的 CSS属性值

    <link id="system_style" type="text/css" href="global.css" rel="stylesheet"/>  <div id="myArticle"> ... </div> 在global.css中声明了 #myArticle{ width:400px;  height:300px; } 这样的情况下,直接通过JS进行getE

  • js简单遍历获取对象中的属性值的方法示例

    js简单遍历获取对象中的属性值的方法示例

    本文实例讲述了js简单遍历获取对象中的属性值的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • 使用JavaScript获取Request中参数的值方法

    假设现在有一个URL,如下. http://www.jb51.net 如何通过JS访问到id和name里面的值呢,实现我们来分析一下思路. 先获取当前页面的URL,通过window.location.href. 提取该URL?后面的部分,通过slice()方法. 把获取到的Request对象分割成字符串数组,通过split() 方法. 接下来看代码. function getUrlVars() { var vars = [], hash; var hashes = window.location

  • JavaScript获取表单enctype属性的方法

    本文实例讲述了JavaScript获取表单enctype属性的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <body> <form id="frm1" enctype="text/plain"> First name: <input type="text" name="fname" value="Donald"&

  • orm获取关联表里的属性值

    ORM--关系对象模型 对象关系映射(英语:Object Relational Mapping,简称ORM,或O/RM,或O/R mapping),是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转换.从效果上说,它其实是创建了一个可在编程语言里使用的"虚拟对象数据库". laravel中的Eloquent ORM用于和数据表互动,其中每个数据库表会和一个对应的「模型」互动,想要了解请查看官方文档或自行百度.获取关联表里的属性值代码如下: /** * [getCont

  • javascript获取select标签选中的值

    复制代码 代码如下: var obj = document.getElementById("testSelect"); //定位id var index = obj.selectedIndex; // 选中索引 var text = obj.options[index].text; // 选中文本 var value = obj.options[index].value; // 选中值 jQuery中获得选中select值 第一种方式 复制代码 代码如下: $('#testSelect

  • Spring实战之获取其他Bean的属性值操作示例

    本文实例讲述了Spring实战之获取其他Bean的属性值操作.分享给大家供大家参考,具体如下: 一 配置 <?xml version="1.0" encoding="GBK"?> <beans xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.springframework.org/schema/beans" xml

  • Java反射通过Getter方法获取对象VO的属性值过程解析

    这篇文章主要介绍了Java反射通过Getter方法获取对象VO的属性值过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 有时候,需要动态获取对象的属性值. 比如,给你一个List,要你遍历这个List的对象的属性,而这个List里的对象并不固定.比如,这次User,下次可能是Company. e.g. 这次我需要做一个Excel导出的工具类,导出的批量数据是以List类型传入的,List里的对象自然每次都不同,这取决于需要导出什么信息.

随机推荐