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 相关文章推荐
取得窗口大小 兼容所有浏览器的js代码
Aug 09 Javascript
js局部刷新页面时间具体实现
Jul 04 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
Dec 30 Javascript
javascript中style.left和offsetLeft的用法说明
Mar 07 Javascript
js数组常见操作及数组与字符串相互转化实例详解
Nov 10 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 Javascript
Vue.js表单控件实践
Oct 27 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
新手简单了解vue
May 29 Javascript
vue eslint简要配置教程详解
Jul 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
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
ThinkPHP之M方法实例详解
2014/06/20 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
基于gulp合并压缩Seajs模块的方式说明
2016/06/14 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
python发布模块的步骤分享
2014/02/21 Python
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
Python3实现并发检验代理池地址的方法
2016/09/18 Python
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
python 实现Harris角点检测算法
2020/12/11 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
优衣库台湾官网:UNIQLO台湾
2019/02/01 全球购物
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
党员个人公开承诺书
2014/08/29 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
毕业证明书
2015/06/19 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python