在前端开发中，有时候需要动态修改的网页元素的样式，这里将使用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. scss-算术运算符

    由于scss具有编程语言的特点,那么运算符是必不可少的. 下面就通过代码实例分别做一下介绍. 一.赋值运算符: 赋值运算符就是我们最为熟悉的冒号(:),用来给声明的变量赋值. 代码实例如下: $hig ...

  2. 如何angular过滤器进行排序？？？

    首先定义一个json文件: 然后写HTML文件: <div id="box"> <!--第一个下拉框--> <select ng-model=&quo ...

  3. XUtils3 的 环境搭建与简单使用

    XUtils3 的 环境搭建 环境搭建三部曲 ----------------------- 说明 : author  修雨轩陈 使用andorid Studio 已经创建了一个项目 并且自己需要使用 ...

  4. 二、安装桌面——Linux学习笔记

    安装桌面并不是商业化用的,只是为了熟悉Linux文档结构而已. 这个比较简单 1.输入安装桌面命令 # yum -y groups install "GNOME Desktop" ...

  5. Centos7设置文件夹写入权限

    用 root 账号执行chmod命令: #chmod -R 777 dirPath 参数 -R 表示递归,dirPath及其之内的所有文件夹.文件都被改变了权限. 例子: #chmod -R 777 ...

  6. javascript正则表达式 - 学习笔记

    JavaScript 正则表达式 学习笔记 标签(空格分隔): 基础 JavaScript 正则表达式是用于匹配字符串中字符组合的模式.在javascript中,正则表达式也是对象.这些模式被用于Re ...

  7. JavaScript 三种工厂模式

    标签(空格分隔): JavaScript 简单工厂模式是工厂函数返回实例化对象或者对象,工厂函数作为一个方法. 工厂方法模式是工厂函数不作改变,将子类放在工厂原型中:工厂函数返回对应的实例化对象:re ...

  8. npm 安装axios和使用增删改查

    1:安装axios(建议安装淘宝镜像) npm install axios 2:项目导入 npm install --save axios vue-axios 3:页面导入 import axios ...

  9. Qt 窗口移动实现

    很多人觉得系统自带的标题栏太丑了,想要自绘一个标题栏,去掉了系统自带的标题栏后,就需要自己实现窗口移动,下面的代码就是实现窗口移动. widget.h #ifndef WIDGET_H #define ...

  10. 【PHP后台】接入支付宝

     我使用PHP主要是为客户端做后台使用,并不会做前端网页.   这两天因为公司项目需要,必须接入支付功能,而支付宝当然首当其冲,考虑迭代版本的需要,首先接入支付宝功能,其他的支付功能以后迭代版本的时候 ...