使用 style 属性可以设置行内的 CSS 样式，而通过 id 和 class 调用是最常用的方法。

<script type="text/javascript">

    window.onload = function(){

        var box = document.getElementById('box');

        box.id='pox';        //交换id之后，就会加载那个id的样式，但是这么做会引发各种怪异的现象 把 ID 改变会带来灾难性的问题

    }

</script>

<style type="text/css">

    #box{

        font-size:20px;

        color:red;

        background:#ccc;

    }

    #pox{

        font-size:30px;

        color:blue;

        background:orange;

    }

</style>

</head>

<body>

    <div id="box">测试Div</div>

</body>

　　不建议通过变换id来改变CSS样式，可以通过class来改变

<script type="text/javascript">

    window.onload = function(){

        var box = document.getElementById('box');

        box.className='bbb';

    }

</script>

<style type="text/css">

    .aaa{

        font-size:20px;

        color:red;

        background:#ccc;

    }

    .bbb{

        font-size:30px;

        color:blue;

        background:orange;

    }

</style>

</head>

<body>

    <div id="box" class="aaa">测试Div</div>

</body>

　　在添加 className 的时候，我们想给一个元素添加多个 class 是没有办法的，后面一个必将覆盖掉前面一个，所以必须来写个函数：

<script type="text/javascript">

    window.onload = function(){

        var box = document.getElementById('box');

        addClass(box,'bbb');

        addClass(box,'ccc');

        //判断是否存在这个 class

        function hasClass(element, className) {

            return element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'));

        }

        //添加一个 class，如果不存在的话

        function addClass(element, className) {

            if (!hasClass(element, className)) {

                element.className += " "+className;

            }

        }

        //删除一个 class，如果存在的话

        function removeClass(element, className) {

            if (hasClass(element, className)) {

                element.className = element.className.replace(

                    new RegExp('(\\s|^)'+className+'(\\s|$)'),' ');

            }

        }

    }

</script>

<style type="text/css">

    .aaa{

        font-size:20px;

        color:red;

        background:#ccc;

    }

    .bbb{

        font-size:30px;

        color:blue;

        background:orange;

    }

    .ccc{

        float:right;

    }

</style>

</head>

<body>

    <div id="box" class="aaa">测试Div</div>

</body>

JavaScript的DOM_通过元素的class属性操作样式的更多相关文章

  1. jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  2. 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  3. JQuery DOM操作（属性操作/样式操作/文档过滤）

    jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...

  4. webAPI(DOM) 2.1 获取页面元素 | 事件1 | 属性操作 | 节点 | 创建元素 | 事件2

    js分三个部分: ECMAScript标准:js的基本语法 DOM:Ducument Object Model--->文档对象模型--->操作页面的元素 BOM:Browser Objec ...

  5. JavaScript基础学习日志（1）——属性操作

    JS中的属性操作: 属性操作语法 属性读操作:获取 实例:获取Input值 实例:获取select值 字符串连接 属性写操作:修改.添加 实例:修改value值 实例:添加图片的src地址 inner ...

  6. dom操作 属性操作 样式操作

    jQuery DOM操作 1 插入子元素 append('<img>') 插后面 被插入元素调用 appendTo('<img scr="...">') 新 ...

  7. javascript中用setAttribute给元素添加colspan属性无效

    先附上代码 var tr=document.createElement('TR'); var td=document.createElement('TD'); td.setAttribute('col ...

  8. 迷你MVVM框架 avalonjs 学习教程8、属性操作

    属性操作是DOM操作很大的一块,它包括类名操作,表单元素的value属性操作,元素固有属性的管理,元素自定义属性的管理,某些元素的一些布尔属性的操作.大多数情况下,元素属性的值是字符串类型,我们称之为 ...

  9. jQuery二——属性操作、文档操作、位置属性

    一.jquery的属性操作 jquery对象有它自己的属性和方法. 其中jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作. 1.html属性操作 是对htm ...

随机推荐

  1. layui对json数据的格式要求

    layui有自己的一套特定的数据格式交互,必须参数code:0,msg:“”,count:数据size(int),data:”数据List”.**一般我们选择封装返回接收类**. 若想要绑定数据到la ...

  2. ZOJ Problem Set - 2818

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1818 一开始想着用循环做,看了别人的解法才发现根本没必要,比较根号n就行了 # ...

  3. 理解bind函数

    前言:之前一直不懂这个函数是干嘛的,最近慢慢有点懂了,说一说自己的理解~ 本文按以下3个方面来谈谈bind函数 1)对bind函数的理解: 2)如何使用bind函数 3)自定义bind函数 (http ...

  4. PHP实用系统函数之数组篇

    PHP中十分实用的系统函数 array array_merge 说明:array  array_merge ( array $array1 [, array $... ] ) 将一个或多个数组的单元合 ...

  5. 为什么推荐用ui-router替代ngRoute

    初学angularjs,第一个实例是官网的phoneCat,里面路由用的是ngRoute,后来看到别的用ui-router,觉得好奇,ui-route是什么呢?百度一些,得到如下解释: ui-rout ...

  6. 通过脚本自动下载Esri会议材料

    在Esri的官网上,可以下载到Esri参加或者举办的各类会议的材料.官方地址为:http://proceedings.esri.com/library/userconf/index.html. 针对某 ...

  7. 远景GIS云产品规划

    远景GIS云平台在初期有过产品设计,随着研发工作的进行以及对GIS云的认知更进行一步,最近重新梳理了平台的产品规划,使以后的开发不至于走偏方向. GIS云平台的研发也是摸着石头过河,免不了有考虑不到的 ...

  8. 在IE、fixfox、chrome等浏览器中ajax提交成功后，打开新标签页面被浏览器拦截问题[转]

    如题: 在项目中要在当前页面中,再新开一个页面, 新开页面的地址是ajax请求后返回的url --------- 试了,浏览器提示组织弹窗..... 网上找,找到了一个处理方式,思路是 1. 先打开一 ...

  9. Linux 中常用命令

    命令基本格式: 命令提示符:[root@localhost ~]#      root 代表当前的登录用户(linux当中管理员账号是root)      @ 无实际意义      localhost ...

  10. 六、angular 生成二维码

    首先需要安装angular-qrcode : bower install monospaced/angular-qrcode npm install angular-qrcode 如何使用? 在相应的 ...