关于JS获取样式

众所周知,html里面有行间样式,style标签样式,外链样式三种。。

1、对于行内样式,直接可以获取node元素上的style的属性,,style属性本身也是css样式对象,直接获取,无关计算后的值或者单位,,你在行间的单位写的是rem,,你在js里面获得的也就是rem的字符串,,但我们一般很少写在html的各个标签上,这有悖于w3c的结构样式分离的思想,并且维护起来困难,这里不细说。

2、对于html中style标签中的样式,目前我只发现了通过TagNames["style"][n]这样的方法去获得这个标签的innerText(这个属性不兼容,contentText/fireFog),或者更麻烦的方法(childNodes[0].nodeValue)不过也没必要,获取到的是类似纯文本的css 字符串,你要想得到某一个属性,还很麻烦,正则或者string对象的方法。写在style标签里面的用法也不多。

3、对于link外面的css的样式文件,,个人觉得挺好用的,也不会有什么css用的rem单位,,在js里面获去计算后的样式就是'px‘这样的转换问题。只不过有点不兼容,基本用if()else{}就可以搞定ie,chrome,firefog之类的游览器。。

var sheet = document.styleSheets[0];  //获得第一个link外链css集群

/*-----------------------获得规则-----------------------*/

sheet.rules[1] /ie支持的写法。。sheet.cssRules[1] /chrome和火狐的写法      //代表的是第二个样式规则

sheet.rules[1].style.backgroundColor  或者 sheet.cssRules[1].style.backgroundColor  //访问第二个样式规则下的背景颜色。。

/*--------------------添加规则-----------------------------*/

sheet.insertRlue(" #div { width:300px ; height:300px; background-color:red; } ",2)  //chrome或者firefog的写法,在集群2的位置添加样式

sheet.addRlue("#div","width:300px;height: 300px; background: red", 2);        //ie的写法,,在集群2的位置添加样式

/*-------------------------删除样式----------------------------*/

sheet.deleteRule(num index)    //chrome或者firefog中删除指定索引的样式规则

sheet.removeRlue( index num )  //ie上删除

(注意,索引位置不能大于sheet.rules.length或者sheet.cssRules.length,不然报错)

4、关于window.getComputedStyle(element,伪类(null))['backgroundColor']和element.currentStyle["background"];获得游览器计算后的css样式,第一个chrome和firefog,第二个ie下的写法。。注意是获取游览器计算后的样式。。’px'

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,737评论 1 92
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,141评论 0 1
  • HTML5面试题总结1.基础问题 = 和 == 和 === 的区别?= : 用于赋值 == : 用于判断 === ...
    LorenaLu阅读 1,175评论 0 4
  • 人生历经沧桑 裸露在外 岁月的痕迹 不畏风雨交加的历练 向上的力量 依然保持挺拔的身姿 人生的道路 每一段是灵魂的...
    郭相麟阅读 176评论 0 0
  • 这次到银川来挺开心的,报上现金流游戏如心里所愿准时到达玩点。玉芳,周蕾的热心让我很放松地融入进来,没有任何精神上的...
    萱_b58a阅读 320评论 0 0