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()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...
随机推荐
- 提取url中参数的方法（转换成json格式）
还是直接上代码吧. //将url中的参数获取到并抓换成json格式 function serilizeUrl(url){ var urlObject={}; //1.正则匹配是不是以?结尾 if(/\ ...
- css3 转换 过渡 及动画
转换transform: 通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸.您可以使用 2D 或 3D 转换来转换您的元素 2D转换属性: transform 向元素应用 2D 或 ...
- Informatica 9.1.0 Domain地址变化修改
由于公司机房的变动,infa所连数据库的IP地址变化,致使INFA不能启动.经过查找资料终于解决,现分享给大家,解决方法如下: 1.查看日志路径: Informatica/9.1.0/tomcat/l ...
- Dynamics CRM GBK编码
Dynamics CRM用文本汉字为条件去请求数据时,传过去的竟然是GBK编码⊙＿⊙ 下面这段代码解决了我的问题,这是拷贝自网上一位大神的博客: http://qq100002656.blog.163 ...
- 设计模式之装饰模式（Decorator）
1. 装饰者模式,动态地将责任附加到对象上.若要扩展功能,装饰者提供了比继承更加有弹性的替代方案. 2.组合和继承的区别 继承.继承是给一个类添加行为的比较有效的途径.通过使用继承,可以使得子类在拥有 ...
- SASS初体验
SASS初体验 标签(空格分隔): sass scss css 1. 编译环境 需要安装Ruby,之后需要打开Start Command Prompt with Ruby运行 gem install ...
- js常用函数汇总（不定期更新）
1.图片按比例压缩 function setImgSize(){ var outbox_w=imgbox.width(), outbox_h=imgbox.height(); imgbox.find( ...
- python入门17 类和对象
类:一类事物的抽象化.概念: 类的变量(属于类的变量,定义在类的开始处) 成员变量(self.变量) 类的方法( @classmethod,cls参数) 成员方法( self参数 ) 静态方法 ...
- 将nodeList转换为数组（兼容性）
将nodeList转换为数组(兼容性) function arrayofNodes(nodes){ var arr = null; try{ arr = Array.prototype.slice.c ...
- 《机器学习实战》中贝叶斯分类中导入RSS源例子
跟着书中代码往下写在这里卡住了,考虑到可能还会有其他同学也遇到了这样的问题,记下来分享. 先吐槽一下,相信大部分网友在这里卡住的主要原因是伟大的GFW,所以无论是软件FQ还是肉身FQ的小伙伴们估计是无 ...