在前端开发中，有时候需要动态修改的网页元素的样式，这里将使用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. iDempiere 使用指南 MRP/生产插件 LiberoMFG 源码安装

    Created by 蓝色布鲁斯,QQ32876341,blog http://www.cnblogs.com/zzyan/ iDempiere官方中文wiki主页 http://wiki.idemp ...

  2. ANR android

    1.android ANR产生原因和解决办法 2.Android ANR异常及解决方法 3.Android ANR 分析解决方法 4.[原创]Android 系统稳定性 - ANR(一) 5.[原创] ...

  3. 基于alpine定制常用命令镜像

    FROM alpine RUN apk update RUN apk add curl coreutils 像busybox.alpine镜像date命令都不是完整版的,不能执行加减的操作(date ...

  4. php调用含有命名空间的类

    现有a.php 和 b.php在同一个目录下 a.php中 namespace myspace; class A{ __construct(){} .... } b.php中调用类A require_ ...

  5. 【面试虐菜】—— 常用SQL语句

    创建表 create table emp( id decimal, name ), age decimal) 删除表 DROP TABLE EMP 插入默认值 CREATE TABLE EMP( Id ...

  6. Git软件的学习

    第一部分:我的git地址是https://github.com/ZHU19007/gitLearning 第二部分:我对git的认识 一.Git是一款免费.开源的分布式版本控制工具.而Github是用 ...

  7. MySQL学习（二）数据类型

    截取书中内容留作学习.... 1.整数类型 2.浮点数与定点数类型 3.日期时间类型 向数据库中插入当前系统时间:CURRENT_TIME或者NOW() 4.文本字符串类型 MySQL枚举类型:cre ...

  8. windows网络模型之重叠IO(完成例程)的使用

    #include <WINSOCK2.H> #include <stdio.h> #define PORT 5150 #define MSGSIZE 1024 #pragma ...

  9. bzoj5029 贴小广告

    Description 现在有一堵墙,墙上分为若干个单元.接下来会来n个人在墙上贴小广告.每次每个人选择墙上连续一段的单元贴上自己公司与众不同的小广告.因为小广告可能会出现被覆盖的情况,由于公司之间存 ...

  10. POJ 3694 无向图的桥

    Network Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 10404   Accepted: 3873 Descript ...