在前端开发中，有时候需要动态修改的网页元素的样式，这里将使用JS动态修改元素样式的方法做个小结：

网页结构：

按钮：

　　标签：input    类型：button     id：btn          value：点我

div:

　　标签：div      id：box

使用JS修改网页元素样式有两种方式：

1.使用ClassName

2.使用Style对象

代码如下：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>DOM操作元素的样式</title>

         <style type="text/css">

             .box{

                 width: 100px;

                 height: 100px;

                 background-color: red;

             }

         </style>

     </head>

     <body>

         <input type="button" id="btn" value="点  我" />

         <div id="box"></div>

         <!-- 添加JS代码 -->

         <script type="text/javascript">

             //定义函数my$-根据元素id获得页面元素,目的是为了提高效率

             function my$(id){

                 return document.getElementById(id);

             }

             // 方法1.根据ClassName修改元素的样式

 //             var btn=my$('btn');

 //             btn.onclick=function(){

 //                 my$('box').className='box';

 //             }

             //方法2.根据Style对象修改元素的样式

             var btn=my$('btn');

             btn.onclick=function(){

                 var box=my$('box');

                 box.style.width="100px";

                 box.style.height="100px";

                 box.style.backgroundColor="red";

             }

         </script>

     </body>

 </html>

注意：

1.操作样式的时候，使用例样式ClassName还是使用Style对象？？

　　当设置多个样式属性的时候使用类样式方便

　　当设置样式属性比较少的时候，使用Style对象比较方便

2.在使用Style对象的时候，遇见宽、高属性，必须加px单位

3.Style对象属性样式的值是字符串

结果图如图：

                           

JavaScript--Dom操作元素的样式的更多相关文章

  1. JavaScript(第二十天)【DOM操作表格及样式】

    DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DOM操作表格和样式的一些知识. 一．操作表格 <table& ...

  2. DOM操作元素

    DOM 操作元素 JavaScript的DOM操作可以改变网页内容.结构和样式.我们可以利用DOM操作元素来改变元素里面的内容.属性等. DOM操作元素: 一.操作元素:(一)innerText .( ...

  3. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  4. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

  5. javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的.   DOM添加元素,使用节点属性  <!DOCTYPE html PUBLIC ...

  6. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  7. 每天一个JavaScript实例-操作元素定位元素

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. javascript DOM操作HTML文档

    文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...

  9. 常见的原生javascript DOM操作

    1.创建元素 创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...

随机推荐

  1. 关于httpclient的终结

    End of life 关于Commons HttpClient项目现在已经结束,不再开发.它已经被HttpClient和HttpCore模块中的ApacheHttpComponents项目所取代,新 ...

  2. matlab练习程序（模拟退火SA）

    模拟退火首先从某个初始候选解开始,当温度大于0时执行循环. 在循环中,通过随机扰动产生一个新的解,然后求得新解和原解之间的能量差,如果差小于0,则采用新解作为当前解. 如果差大于0,则采用一个当前温度 ...

  3. Siebel应用数据结构层次

    在Siebel应用里数据在多个层次上使用了不同的定义方式,每一个层次侧重于数据的不同的特征,主要分为数据用户界面层定义(UI),业务逻辑层定义(Business Layer,可以是业务含义层)以及数据 ...

  4. SQL转Linq工具的使用——Linqer

    官方下载网站:http://www.sqltolinq.com/ 本文介绍版本为Linqer 4.5.7 第一步:下载下来,解压,双击安装.exe文件,运行界面如下. 第二步:建立与数据库的连接 点击 ...

  5. log4go的日志滚动处理——生产环境的适配

    日志处理有三类使用环境,开发环境DE,测试环境TE,生产环境PE. 前两类可以看成是一类,重要的是屏幕显示--termlog.生产环境中主要用的是socklog 和 filelog,即网络传输日志和文 ...

  6. May 17th 2017 Week 20th Wednesday

    Men are nearly always willing to believe what they wish. 人总爱想入非非,把愿望变成现实. It is just the humancondit ...

  7. 如何从ERP下载Sales BOM到CRM

    在ERP使用事务码CS01创建一个BOM,类型选择5 - Sales BOM: BOM的抬头维护material 1419,在BOM的component部分维护另外两个material 1421和14 ...

  8. 『看球笔记』20140208利物浦VS阿森纳，十字重剑与蜜蜂飞舞

      红圈位置42%对58%的控球率,是不是觉得比分很不符?我们卖个关子,最后再说这个.   十字重剑     第一次任意球防守,俩后卫盯俩后卫,负责斯科特尔的是科斯切尔尼,而默特萨克盯图雷.     ...

  9. 最重要的“快捷键” IntelliJ IDEA

    转载:http://www.youmeek.com/intellij-idea-part-iii-hotkeys-explain/ @IntelliJ IDEA第三部分视频教程:最重要的“快捷键”专讲 ...

  10. IOS NSLayoutConstraint 页面布局（通过代码添加约束）

    #import "ViewController.h" @interface ViewController () @property (nonatomic, strong) UIVi ...