js批量设置样式的三种方法不推荐使用with


Posted in Javascript onFebruary 25, 2013

一般我们都用css来批量设置样式,现在我们用js也可以批量设置样式:
总结三种方法如下

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>无标题文档</title> 
<style type="text/css"> 
#div1{ width:100px; height:100px; background:#069;} 
</style> 
<script type="text/javascript"> 
//第一种使用JSON 
function setStyle(obj,json){ 
for(var i in json) 
{ 
obj.style[i]=json[i]; 
} 
} 
window.onload=function(){ 
var oDiv=document.getElementById('div1'); 
// setStyle(oDiv, {width: '200px', background: 'red'}); //第一种 
// oDiv.style.cssText="width: 200px; height:300px; background:yellow;"; //第二种 使用cssText 
//使用第三种 with (不推荐使用) 
with(oDiv.style) 
{ 
width='300px'; 
height='500px'; 
background='yellow'; 
} 
}; 
</script> 
</head> 
<body> 
<div id="div1"></div> 
</body> 
</html>
Javascript 相关文章推荐
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
jquery使用ajax实现微信自动回复插件
Apr 28 Javascript
JavaScript中Math.SQRT2属性的使用详解
Jun 14 Javascript
JS实现当前页居中分页效果的方法
Jun 18 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
May 16 Javascript
AngularJS之依赖注入模拟实现
Aug 19 Javascript
JS触摸与手势事件详解
May 09 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
React Navigation 使用中遇到的问题小结
May 08 Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
javascript触发模拟鼠标点击事件
Jun 26 Javascript
js 获取计算后的样式写法及注意事项
Feb 25 #Javascript
js调用webservice中的方法实现思路及代码
Feb 25 #Javascript
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 #Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
Feb 25 #Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 #Javascript
30分钟就入门的正则表达式基础教程
Feb 25 #Javascript
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 #Javascript
You might like
php下的权限算法的实现
2007/04/28 PHP
sae使用smarty模板的方法
2013/12/17 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
AUC计算方法与Python实现代码
2020/02/28 Python
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
实习自我鉴定模板
2013/09/28 职场文书
实习单位接收函
2014/01/11 职场文书
《七颗钻石》教学反思
2014/02/28 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
复试通知单模板
2015/04/24 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
使用tensorflow 实现反向传播求导
2021/05/26 Python
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android