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')

  就可以获得啦:)

时间: 2024-10-06 16:26:34

javascript 获取特定的 CSS属性值_经验交流的相关文章

CSS属性 - white-space 空白属性使用说明_经验交流

CSS属性 - white-space 空白属性说明 该CSS属性用来处理空白. 值:normal | pre | nowrap | inherit  可用值 值的说明  normal 缺省值.文本自然换行.如果超过元素宽度,内容自然换到下一行.  nowrap 不允许换行.  pre 保留换行和空白.这个值只有当你声明了!DOCTYPE,且 IE 6 以上版本才支持. 在 HTML 文件里,空白,比如换行符 (line breaks). 空格 (spaces). 制表符 (tabs),都被自动

不通过JavaScript实现的自动滚动视差效果_经验交流

这个效果是仿照Chirs Coyier的视差教程实现的,经过Chirs的允许使用了其中的星空背景. 运行效果:在这里观看:http://www.fofronline.com/experiments/parallax/该效果可以在Safari 4 Beta和Google Chrome中正常预览,实现该效果无需JavaScript.(但是在IE7及以下版本中无法观看) 实现方法:这个页面的HTML代码非常简单,通过一个div来定义背景,另一个div来定义内容,这里使用了CSS3中的多重背景技术,所以

做网页中需要掌握的八个CSS布局技巧_经验交流

1.若有疑问立即检测 在出错时若能对原始代码做简单检测可以省去很多头痛问题.W3C对于XHTML与CSS 都有检测工具可用,请见 http://validator.w3.org .请注意,在文件开头的错误,可能因为不当的结构等因素造成更多错误:我们建议先修正一些最明显的错误之后重新检测,这样也许会让错误数量爆减. 2.使用浮动功能时记得适当清除指令  浮动是个危险的功能,未必会产生您所期望的结果.如果您遇到浮动元素延伸到外围容器的边框或者其他不正常情况,请先确定您的做法是正确的.请参阅Eric 

Class与ID区别 margin和padding区别 CSS学习笔记_经验交流

由于现在百分之99.99%的CMS都是用div+css来构建网页模板的,被逼无奈,一大把年纪了还要学习CSS,说实话没觉得用div来布局比table好在什么地方!但迫于行势,先硬着头皮看吧,能学多少是多少.根据数据与结构分离的原则,CSS最好要独立于网页文件,用 复制代码 代码如下: <link rel="stylesheet" type="text/css" href="../xxx/web.css" />  语句将CSS文件调入网

以前写的两个CSS树形菜单_经验交流

第一次写的CSS树形菜单比较简单,只有二级目录,javascript代码总共不到十行,主要是靠CSS中的包含写法来实现的.演示地址:(1)http://www.cnlei.org/mycode/csstreemenu/index.html(2)http://cnlei.iecn.net/mycode/csstreemenu/index.html下载链接:(1)http://www.cnlei.org/mycode/csstreemenu/csstreemenu.rar(2)http://cnle

div结合css布局bbs首页(div+css布局入门)_经验交流

我把论坛首页分为header区,信息区,内容区,页脚区.首先用一大div把这些包含进来,主要是考虑到页面整体调节方便,比如要调成宽屏的或者是窄屏的,只要设置一下这个大div就可以了. 先把代码贴出来,供朋友们调试使用.css: 复制代码 代码如下: /* CSS Document */ body{ background-color:#F5F5F5; margin:0; padding:0; font-family : "Lucida Grande", Verdana, Lucida,

用js实现的DIV+CSS编辑器代码_经验交流

在线DIV+CSS编辑器 类/标签/ID: 所有数值都不用输入单位; 宽: 高: 背景色: 前景色: 边框: 颜色:选择soliddottednonehiddendasheddoublegrooveridgeinsetoutset 外间距 Margin : 如:10px 2px 内间距 Padding: 如:10px 2px 浮动: 左 右 × 显示:选择 block inline none 可见:可见 隐藏 × 文本对齐:选择leftcenterright 行高:%无px 文字缩进: 文本:

css 命名规范_经验交流

页头:header 登录条:loginbar 标志:logo 侧栏:sidebar 广告:banner 导航:nav 子导航:subnav 菜单:menu 子菜单:submenu 搜索:search 滚动:scroll 页面主体:main 内容:content 标签页:tab 文章列表:list 提示信息:msg 小技巧:tips 栏目标题:title 加入:joinus 指南:guild 服务:service 热点:hot 新闻:news 下载:download 注册:regsiter 状态:

javascript横排竖排标准选项卡效果代码_经验交流

首页 嘿嘿,无视div原始class值. 测试 继续无视h3原始class值. 无聊 h3没有值也可以- 傻蛋 div没有值一样可以- 首页 嘿嘿,无视容器原始class值. 测试 继续无视h3原始class值. 无聊 h3没有值也可以- 傻蛋 div没有值一样可以- 首页 嘿嘿,无视h3原始class值. 测试 继续无视div原始class值. 无聊 h3没有值也可以- 傻蛋 class值相似一样也可以- 指定class后,即时再多一个div也行.