使用 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. C# 扩展方法一

    1. 何为扩展方法 扩展方法是C#3.0引入的语法特性,是一种特殊的静态方法.它使得我们能向现有的数据类型“动态”添加方法,而不需要创建行的派生类型.重新编译或直接修改原始类型的源代码. 注意扩展方法 ...

  2. Android中自定义弹出PopupWindow后返回按键失效的问题解决

    PopupWindow出现之后,默认的是所有的操作都无效的,除了HOME键.而且是可以操作后面的界面的.想要锁定后面的界面,很简单,只需要让PopupWindow是focusable的:popupWi ...

  3. Spring_Spring与AOP_AspectJ基于XML的实现

    一.前置通知 import org.aspectj.lang.JoinPoint; import org.aspectj.lang.ProceedingJoinPoint; import org.as ...

  4. 【说文解字】Unix与Linux

    历史 Unix操作系统是由Ken Thompson和Dennis Ritchie于1969-1970年发明. 它的部分技术来源可以追溯到Multics工程,后者因为过于庞大复杂而失败. 研究人员吸取教 ...

  5. linux环境下mysql 5.7.1X 如何重置root密码

    1,vi  /etc/my.cnf [mysqld]下加入参数skip-grant-tables   保存退出. 2,重启mysql [root@21yunwei src]# /etc/init.d/ ...

  6. jquery each遍历判断返回false方法

    在jquery each中遍历返回false失效,解决办法,用变量解决: var num = 0; $(".box").find("input[type='text']& ...

  7. js for循环中点击事件中无法获取每一个i值的问题

    好像是第二次遇到这个问题,必须要总结一下!! <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  8. 基于jQuery日历插件制作日历

    这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...

  9. js-js的语句

    - Java里面的语句: ** if判断 *** =:表示赋值 *** ==:表示判断 ** switch语句 ** 循环 for while do-while - js里面的也是这些语句 ** if ...

  10. android中利用HttpURLConnection进行Get、Post和Session读取页面。

    直接上代码,调用的时候要放在线程中. package slj.getsms; import java.io.BufferedReader; import java.io.InputStreamRead ...