设为首页收藏本站

就爱编程论坛

 找回密码
 注册

人人连接登陆

无需注册,直接登录

用新浪微博连接

一步搞定

QQ登录

只需一步,快速开始

查看: 750|回复: 0
打印 上一主题 下一主题

js批量修改CSS定义 [复制链接]

Rank: 9Rank: 9Rank: 9

  • TA的每日心情
    无聊
    2025-5-27 03:37:20
  • 签到天数: 366 天

    [LV.9]以坛为家II

    论坛先锋 学习至圣 荣誉成员 论坛元老 活跃之星 终极领袖

    我玩的应用:

    跳转到指定楼层
    楼主
    发表于 2011-7-4 23:57:43 |只看该作者 |倒序浏览
    当需要批量修改某些元素的样式时,可以直接用JS修改CSS的定义
    <style type="text/css">
    div{
       height:300px;
       width:300px;
       border:1px #003399 solid;
       background-color:#006633;
    }
    </style>

    <script language="JavaScript" type="text/javascript">
    if(document.all){//兼容IE
       document.styleSheets[0].rules[0].style.height="100px";
    }else{//兼容firefox
       document.styleSheets[0].cssRules[0].style.height="100px";
    }
    //alert(document.getElementsByTagName('style')[0].innerHTML);
    </script>

    写成函数,由于样式名只能用数字来索引,所以用了DOM遍历(此函数来源于:http://tb.blog.csdn.net/TrackBack.aspx?PostId=1885195
    <style>
    .exampleA{}
    .exampleB{}
    </style>
    <script>
    function changecss(theClass,element,value) {
    var cssRules;
    if (document.all) {
       cssRules = 'rules';
    }
    else if (document.getElementById) {
       cssRules = 'cssRules';
    }
    for (var S = 0; S < document.styleSheets.length; S++){
       for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
        if (document.styleSheets[S][cssRules][R].selectorText == theClass) {
         document.styleSheets[S][cssRules][R].style[element] = value;
        }
       }
    }
    }
    </script>
    <span class="exampleA">Example A</span>
    <span class="exampleB">Example B</span>
    <span class="exampleA">Example A</span>
    <input type="button" value="Change A Red"/><input type="button" value="Change A Black"/>
    分享到: QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    分享分享0 收藏收藏0 支持支持0 反对反对0 分享到人人 转发到微博
    [img=http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=fRUcHhYWGAQ9GxIFEBwUEVMeEhA]http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_02.png[/img]

    使用道具 举报

    您需要登录后才可以回帖 登录 | 注册 人人连接登陆

    晴云孤魂's Blog|就爱编程搜帖|手机版|Archiver|就爱编程论坛     

    GMT+8, 2025-7-2 19:04 , Processed in 0.164267 second(s), 26 queries .

    Powered by Discuz! X2

    © 2001-2011 Comsenz Inc.

    回顶部