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()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...
随机推荐
- 搭建 Spring 2.5.6 开发环境
1.jar 包准备: spring 2.5.6 的 jar 包(链接: http://pan.baidu.com/s/1skVFfcx 密码: mbiz),如图: commons-logging-1. ...
- Hive的UDF(用户自定义函数)开发
当 Hive 提供的内置函数无法满足你的业务处理需要时,此时就可以考虑使用用户自定义函数(UDF:user-defined function). 测试各种内置函数的快捷方法: 创建一个 dual 表 ...
- C# 调用 c++ 非托管dll时wchar类型参数的乱码处理
[DllImport("user32.dll", CallingConvention = CallingConvention.WinApi)] public static exte ...
- Linux文件与目录管理常用命令
Linux文件与目录常用命令管理: 文件权限/目录权限: -rwxr-xr-x. root root Mar : zeng.txt r():可读 w():可写 x():可执行 drwxr-xr-x. ...
- 三个方法教会你win7中IIS7配置php环境
三个方法教会你win7中IIS7配置php环境.今天静下心来研究了下在win7中使用IIS7配置php环境,其实很简单!跟下面方法做之前,请先确定你的电脑中未安装其它相关环境程序及服务,之前安装过ap ...
- vs2010开发链接服务器出现错误（SourceSafe）
用vs2010开发项目链接服务器时出现 之前是因为权限问题,每次打开项目文件时 ,都要先直接进服务器然后打开项目. 用了两天,又不行了.就这个问题已经问了了老大不下3次了. 其实很是不想再麻烦他老人家 ...
- numpy cheat sheet
numpy cheat sheet https://files.cnblogs.com/files/lion-zheng/Numpy_Python_Cheat_Sheet.pdf
- 通过一个例子学习Kubernetes里的PersistentVolumeClaim的用法
Kubernetes的pod本身是无状态的(stateless),生命周期通常比较短,只要出现了异常,Kubernetes就会自动创建一个新的Pod来代替它. 而容器产生的数据,会随着Pod消亡而自动 ...
- Codeforces Round #422 (Div. 2)
Codeforces Round #422 (Div. 2) Table of Contents Codeforces Round #422 (Div. 2)Problem A. I'm bored ...
- react中PropTypes与DefaultProps的应用
每个组件都有自己的props参数,这参数是从父组件接收的一些属性,那么如何对参数的类型作校验.如何定义参数的默认值.这里涉及到两个基础的概念,叫做proptypes 和 defaultprops.子组 ...