蚂蚁论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 46|回复: 0

Javascript 访问样式表实现代码

[复制链接]

1979

主题

1

好友

1609

积分

管理员

Rank: 64Rank: 64Rank: 64Rank: 64

  • TA的每日心情
    奋斗
    2016-1-22 16:23
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    荣誉管理 论坛元老 热心会员 活跃会员 最佳新人 灌水之王

    发表于 2017-10-13 07:28:37 |显示全部楼层
    Javascript 访问样式表实现代码
    再记录一下 Javascript访问样式表 Javascript可以访问网页中元素的style属性,例如: lt;div id="main" style="background-color:red"gt;lt;/divgt; 通过js访问style属性 alert(documentgetElementById("main")stylebackgroundColor); 通过js改变style属性 documentgetElementById("main")stylebackgroundColor="blue"; 以上代码是我们所熟悉的,但通常我们用样式表来控制元素的外观属性,例如:



    JS控制CSS

    main
    {
    margin-left:200px;
    margin-top:70px;
    width:200px;
    height:100px;
    background-color999999;
    border:1px solid 666666;
    }



    Show





      [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]此时如果我们再使用 alert(documentgetElementById("main")stylebackgroundColor); 则只能获得一个空值,所以只能通过js去访问样式表了 documentstyleSheets可以获得样式表的集合,因为浏览器之间有很大不同,访问样式表的单独规则也不同DOM为每一个样式表指定一个cssRules集合,Mozilla和Safari正确实现了这个标准,不过可惜IE中定义这个集合为rules,因此可以使用以下代码来获得正确的对象: var oCssRules=documentstyleSheets[0]cssRules||documentstyleSheets[0]rules; 这样就可以获得不同浏览器的CSS集合了 通过以下JS代码来获得样式表中的样式: 复制代码 代码如下:function GetCSS() { var oCssRules=documentstyleSheets[0]cssRules||documentstyleSheets[0]rules; alert(oCssRules[0]stylebackgroundColor); } styleSheets[0]表示第一个样式表引用,oCssRules[0]表示第一个样式规则(即main{}的内容),通过style属性来访问具体的规则 同理,更改该样式表规则代码如下: 复制代码 代码如下:function SetCSS() { var oCssRules=documentstyleSheets[0]cssRules||documentstyleSheets[0]rules; oCssRules[0]stylebackgroundColor="red"; oCssRules[0]stylemarginLeft="20px"; oCssRules[0]stylemarginTop="20px"; } 但是需要注意的是,因为很多元素有可能关联同一个样式表,所以改变时需要慎重 除了元素的style对象和css规则外,每个元素还有一个最终样式,最终样式用来告诉我们元素最后是如何显示在屏幕上的,也就是style和css重合计算后的样式IE和DOM有两种方式来访问此样式,IE中通过currentStyle属性,DOM中使用get**putedStyle()方法 JS获得最终样式的方法如下: 复制代码 代码如下:function GetFinalCSS() { var oDiv=documentgetElementById("main"); //访问style属性 alert(oDivstylebackgroundColor); //IE方法 alert(oDivcurrentStylebackgroundColor); //DOM方法,第二个参数为伪元素,如:hover,first-leeter之类 //alert(documentdefaultViewget**puteStyle(oDiv,null)backgroundColor); } 我经常使用currentStyle来获得样式,省去了访问样式表的麻烦 需要注意的是currentStyle是只读属性,不能够对其赋值,因为其是多种样式综合计算后的样式规则,这点并不难理解 对于get**putedStyle方法,可以通过documentdefaultView来调用(IE和Safari不此方法)所以,当使用get**putedStyle方法时,最好在多个浏览器上进行测试
    您需要登录后才可以回帖 登录 | 立即注册

    关闭

    蚂蚁站长论坛推荐上一条 /1 下一条

    QQ|Archiver|手机版|广告服务|蚂蚁站长-站长之家 ( 黔ICP备16008478号-1  

    GMT+8, 2017-10-23 06:50

    Powered by 站长论坛

    © 2007-2013 Jzant.com Inc.

    回顶部