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()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...
随机推荐
- HBase伪分布式安装(HDFS)+ZooKeeper安装+HBase数据操作+HBase架构体系
HBase1.2.2伪分布式安装(HDFS)+ZooKeeper-3.4.8安装配置+HBase表和数据操作+HBase的架构体系+单例安装,记录了在Ubuntu下对HBase1.2.2的实践操作,H ...
- 02_Redis数据类型（String、Hash）
[Redis数据类型] redis是通过key-Value来存储的,其支持的数据类型如下: 1.字符串 2.Hash 3.List 4.Set 5.SortSet(zset) 注:redis中,命令( ...
- 跨平台移动开发_PhoneGap 使用Geolocation基于所在地理位置坐标调用百度地图API
使用Geolocation基于所在地理位置坐标调用百度地图API 效果图 示例代码 <!DOCTYPE html> <html> <head> <title& ...
- JavaScript中弧度和角度的转换
弧度 = 角度 * Math.PI / 180 角度 = 弧度 * 180 / Math.PI 在JavaScript Math 对象中: sin() 方法可返回一个数字的正弦. tan() 方法可返 ...
- em px 换算在线工具
网址: http://pxtoem.com/#help http://www.runoob.com/tags/ref-pxtoemconversion.html
- meat标签使用
meta是html语言head区的一个辅助性标签.几乎所有的网页里,我们可以看到类似下面这段的html代码: <head> <meta http-equiv="conten ...
- MySQL学习（一） 数据表基本操作
创建数据库:create database db_name 查看数据库结构:show create database db_name 删除数据库:drop database db_name 查看数据库 ...
- 关于c++对文件读写的封装
namespace { UINT_T GetWriteSizeForNoBuf(UINT_T fsize) { UINT_T write_buf_size = ; == ) { write_buf_s ...
- Ubuntu 入门安装
写在前面的话:很少一次上这么多干货,主要是对Linux的一些基本操作,常用的软件的安装,这个其实不算什么吧,方便大家也方便我,新手们早点入门Linux,少走弯路,网上资料很多,相当于一个整合咯,都是一 ...
- 【[SDOI2008]洞穴勘测】
题目 由于始终保证连通性于是我们可以用\(LCT\)来维护这个森林 三个操作分别是\(link,cut,findroot\) 代码 #include<iostream> #include& ...