使用 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. Git——新手入门与上传项目到远程仓库GitHub

    Git:先进的分布式版本控制系统,一个开源式的分布式版本控制工具. Git安装 在Windows操作系统下,访问Git下载地址https://git-for-windows.github.io/ 注册 ...

  2. jquery点击按钮或链接，第一次与第二次执行不同的事件

    本文和大家分享一个jquery的实例,这个实例实现的是点击网页里的按钮或链接,第一次和第二次会执行不同的事件,也就是两个事件会轮流执行. <script language="javas ...

  3. xcode开启后，每次调试运行要输入密码

    1.contorl+空格 打开终端 2.输入DevToolsSecurity --status查看状态,如果是Developer mode is currently disabled.那就对了 3.输 ...

  4. PHP反射ReflectionClass、ReflectionMethod 学习笔记 （一）

    PHP5 具有完整的反射API,添加对类.接口.函数.方法和扩展进行反向工程的能力. 反射是什么? 它是指在PHP运行状态中,扩展分析PHP程序,导出或提取出关于类.方法.属性.参数等的详细信息,包括 ...

  5. C# OO（初级思想）。

    继承,多态,封装 在C#中,为了能够合理描述自然界的规律,面向对象的编程引入了继承的概念,是面向对象编程中最重要的概念之一,定义了如何根据现有的类创建新类的过程. 继承:一个类派生出来的子类具有这个类 ...

  6. WPF实现夜间模式

    背景 项目中设计了一个黑色主题,稍加改正也可作为夜间模式,效果图如下: 原理 由于项目中存在地图,而地图完全是由位图组成,不能直接改变背景色,所以我在内容上面放置了一个黑色的Border作为遮罩.可通 ...

  7. TCP/IP Socket发送接收图片demo

    一个实例通过client端和server端通讯 客户端通过TCP/IP传输资源文件,比如图片,文字,音频,视频等..... 服务端接受到文件存入本地磁盘,返回接受到:“收到来自于"+s.ge ...

  8. 51Nod 算法马拉松23 开黑记

    惨啊……虽然开了半天黑,但是还是被dalao们踩了…… 第二次开黑,还是被卡在rank20了,我好菜啊……= = 写一写比赛经过吧…… 看到题之后习惯性都打开,A~D看上去似乎并没有什么思路,F应该是 ...

  9. bootstrap框架怎么在html页面加载使用

    今天敲代码的时候,正好碰到这个问题. 与大家分享这个解决方法:     1/7 到bootstrap官方网站下载,对于我们开发者来说,直接下载编译和压缩后的CSS.JavaScript文件,另外还包含 ...

  10. sublime设置语法自动整齐快捷键技巧

    preference>>key bindings-user>>编辑设置文档, 输入 { "keys": ["ctrl+q"], &quo ...