在前端开发中，有时候需要动态修改的网页元素的样式，这里将使用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. for计算位置坐标

    代码1效果图: 代码2效果图: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  2. Java设计模式—责任链模式

    责任链模式的定义: 使多个对象都有机会处理请求,从而避免了请求的发送者和接受者之间的耦合关系.将这些对象连成一条链,并沿着这条链传递该请求,直到有对象处理它为止. 责任链模式的重点是在"链& ...

  3. Microsoft Fluent Design System

    转载自:http://www.ui.cn/detail/131217.html 就在刚刚举办的 Microsoft Build 2017 中,微软对外公布了它们最新的设计语言--"Fluen ...

  4. Flask博客类登录注册验证模块代码(十四)

    1 文件系统 blog #博客类 App forms #表单 __init__.py user.py models #模型 __init__.py user.py static #静态文件 templ ...

  5. ASP.NET向MySQL写入中文的乱码问题-.NET技术/C#

    1,在 mysql数据库安装目录下找到my.ini文件,把default-character-set的值修改为 default-character-set=gb2312(修改两处),保存,重新启动. ...

  6. 【Leetcode】【Easy】Maximum Depth of Binary Tree

    Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...

  7. May 11th 2017 Week 19th Thursday

    If you fell down yesterday, stand up today. 昨天跌倒了,今天仍然要站起来. From Herbert George Wells. If you fell d ...

  8. 长大Tips的第一步

    任务进度:登陆界面的初步设计. 运行环境:windows10 编译环境:netbeans 编写语言:java 界面展示: 任务简介: 本次任务指示简单的完成了界面设计,登陆按钮暂未实现,持续更新中,敬 ...

  9. python图片黑白化

    #!/usr/bin/env python #-*- coding:utf-8 -*- from PIL import Image im = Image.open(r"C:\Users\wa ...

  10. Android（java）学习笔记54：Android 调用Vibrator震动功能

    1. 之前我编写的代码是如下: package com.himi.vibrate; import android.app.Activity; import android.app.Service; i ...