使用 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. 数据存储之第三方FMDB优化

    最近项目要用到数据库,采用的是第三方FMDB, 之前做C#时用过sqlHelper,自己就按着sqlHelper的思路封装了一下,封装的也比较简单,看到网上有一些根据FMDB封装的ORM框架,但基本都 ...

  2. node错误集合

    1.端口被占用 node .\app.js events.js:167 throw er; // Unhandled 'error' even 解决办法:8888端口被占用了,更改一个端口就好 2. ...

  3. redis中的发布订阅(Pub/Sub)

    这里使用nodejs的redis模块说明,具体可见https://www.npmjs.com/package/redis,先来通过一个简单的例子了解下redis中的Pub/Sub具体怎么实现吧.. v ...

  4. [javaEE] response实现图片下载

    在Servlet中的doGet()方法中 获取FileInputStream对象,new出来,构造参数:String的文件路径 得到文件路径,调用this.getServletContext().ge ...

  5. java使用lock实现一个简单的生产者和消费者模式

    import java.util.concurrent.locks.Condition; import java.util.concurrent.locks.ReentrantLock; public ...

  6. SpringBoot之整合MyBatis

    今天了解一下SpringBoot如何与我们最常用的ORM框架Mybatis整合. 一. 需要在pom.xml文件里加入mybatis的依赖 <dependency> <groupId ...

  7. Groovy中each、find跳出循环

    在groovy中使用break跳出each或者find的循环会会报错,为什么呢?groovy中each.find方法是一个闭包操作,要想跳出循环要使用 return true,但有几个问题有待研究: ...

  8. Maven学习总结（七）：Maven的聚合和继承

    一.聚合 如果我们想一次构建多个项目模块,那我们就需要对多个项目模块进行聚合 1.1.聚合配置代码 1 <modules> 2 <module>模块一</module&g ...

  9. 【数据库】java链接jdbc 释放资源

    /* *   编写快速 入门的jdbc 程序 : *    *    1. 先导入 具体的驱动jar包 *    2. 编写一个类 , 写jdbc 的程序 *  *  具体的编写 java类的 代码的 ...

  10. <Android 基础（二十二）> EditText 无法显示完全以及尝鲜Android N

    前言 最近将Android Studio更新到了2.2 ,模拟器的Android版本也来到了最新的Nougat.很令人兴奋的一件事情呢! 对, 我就是这么没出息.文章结尾来几张图. 问题 最近遇到一个 ...