在前端开发中，有时候需要动态修改的网页元素的样式，这里将使用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. 阿里云服务器Linux常用命令

    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...

  2. 【转载】Navicat Premium 12安装与激活

    原文地址 https://www.jianshu.com/p/5f693b4c9468#comment-20147185感谢作者的无私奉献,无意侵权,如需删除请联系我!所提供的激活文件理论支持Navi ...

  3. CKEditor的使用

    需要配置的功能列表 //class: cke_button( 按钮 ) , ck_combo(下拉) /* 需要配置的功能列表 document:保存(save).新建(newpage).预览(pre ...

  4. 原生js获取手机定位信息

    <script type="text/javascript"> function Location() {}; Location.prototype.getLocati ...

  5. sheepdog

  6. linux注册服务教程

    该说明是项目完成很久之后,整理资料时的偶然发现,当时所操作的linux为中标麒麟,需要对项目进行开机自启,对llinux还不熟悉,找不到linux中的服务自启设置.辗转多次才找到了解决方案.记录以供参 ...

  7. javascript字面量

    在JavaScript里面,字面量包括:字符串字面量(string literal ).数组字面量(array literal)和对象字面量(object literal),另外还有函数字面量(fun ...

  8. 20165322 实验三 敏捷开发与XP实践

    实验三 敏捷开发与XP实践 安装alibaba 插件,解决代码中的规范问题 根据老师的教程:打开Settings ->Plugins -> Browse repositories...在搜 ...

  9. 【转】jQuery源码分析-03构造jQuery对象-源码结构和核心函数

    作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 毕竟是边读边写,不对的地方请告诉我,多多交流共同进步.本章还未写完,完了会提交PDF. 前记: 想系 ...

  10. 【luogu P3952 时间复杂度】 题解

    对于2017 D1 T2 这道题 实实在在是个码力题,非常考验耐心. 其实大体的思路并不是非常难想出来,但是要注意的小细节比较多. 题目链接:https://www.luogu.org/problem ...