JavaScript--Dom操作元素的样式
在前端开发中，有时候需要动态修改的网页元素的样式，这里将使用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操作元素的样式的更多相关文章
- JavaScript(第二十天)【DOM操作表格及样式】
DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DOM操作表格和样式的一些知识. 一．操作表格 <table& ...
- DOM操作元素
DOM 操作元素 JavaScript的DOM操作可以改变网页内容.结构和样式.我们可以利用DOM操作元素来改变元素里面的内容.属性等. DOM操作元素: 一.操作元素:(一)innerText .( ...
- javascript DOM 操作 attribute 和 property 的区别
javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...
- javascript DOM 操作
在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...
- javascript DOM 操作基础知识小结
经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的. DOM添加元素,使用节点属性 <!DOCTYPE html PUBLIC ...
- javascript DOM操作之 querySelector,querySelectorAll
javascript DOM操作之 querySelector,querySelectorAll
- 每天一个JavaScript实例-操作元素定位元素
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- javascript DOM操作HTML文档
文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...
- 常见的原生javascript DOM操作
1.创建元素 创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...
随机推荐
- H5分享到微信好友朋友圈QQ好友QQ空间微博二维码
这是分享按钮: <button onclick="call()">通用分享</button> <button onclick="call(' ...
- 如何angular过滤器进行排序？？？
首先定义一个json文件: 然后写HTML文件: <div id="box"> <!--第一个下拉框--> <select ng-model=&quo ...
- 在Windows 7 上安装 Mapnik
环境: 1.Windows 7_64位 2.Python 2.7_32位 步骤: 1.下载 Mapnik SDK http://mapnik.org/download/ 我下载的是 Windo ...
- SharePoint 2013 - Callout
1. 没有OOTB的方法对Callout进行修改,Callout可以使用在以下范围: Document Library Assert Library Images Library Pages Libr ...
- python闭包&装饰器&偏函数
什么是闭包? 首先还得从基本概念说起,什么是闭包呢?来看下维基上的解释: 在计算机科学中,闭包(Closure)是词法闭包(Lexical Closure)的简称,是引用了自由变量的函数.这个被引用的 ...
- 设计模式之适配器模式（Adapter）
1. 概述 将一个类的接口转换成客户希望的另外一个接口.Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以在一起工作. 2. 解决的问题 即Adapter模式使得原本由于接口不兼容而不 ...
- Centos7安装JDK1.8 Linux64bit
流程一览: 1.下载JDK1.8(jdk-8u11-linux-x64.tar.gz) 2. 解压缩安装 3.配置JAVA_HOME环境变量 4.切换JDK1.8为当前使用的JDK 5.重启,查看安装 ...
- WAKE-SPM-综述
1,SPM 1,1source paper:http://lear.inrialpes.fr/pubs/2007/ZMLS07/ZhangMarszalekLazebnikSchmid-IJCV07- ...
- March 1 2017 Week 9 Wednesday
If you are serious giving up something, giving up is not serious at all. 如果你慎重地决定要放弃,那么放弃本身就没什么大不了的. ...
- python创建项目
一.准备下载 python3.6.6 https://www.python.org/downloads/windows/(需要注意你的电脑是32位还是64位) mysql 5.1.72 https:/ ...