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 相关文章推荐
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
莱鸟介绍javascript onclick事件
Jan 06 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
Jun 02 Javascript
浅谈JS的基础类型与引用类型
Sep 13 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
Apr 21 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
关于Vue源码vm.$watch()内部原理详解
Apr 26 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
vue项目中使用rem,在入口文件添加内容操作
Nov 11 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加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
自己做的模拟模态对话框实现代码
2012/05/23 Javascript
JavaScript之编码规范 推荐
2012/05/23 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
jquery加载图片时以淡入方式显示的方法
2015/01/14 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
走进AngularJs之过滤器(filter)详解
2017/02/17 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
Python的argparse库使用详解
2018/10/09 Python
python获取中文字符串长度的方法
2018/11/14 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
python 自定义异常和主动抛出异常(raise)的操作
2020/12/11 Python
python Pexpect模块的使用
2020/12/25 Python
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
人事主管岗位职责
2014/01/30 职场文书
客服专员岗位职责
2014/02/28 职场文书
计算机系本科生求职信
2014/05/31 职场文书
高三英语教学反思
2016/03/03 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python
Python图像处理库PIL详细使用说明
2022/04/06 Python
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python
Python中的 enumerate和zip详情
2022/05/30 Python