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可以控制样式的名称写法一览
Jan 16 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
简单实现bootstrap选项卡效果
Feb 08 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
原生JS发送异步数据请求
Jun 08 Javascript
详解vue 组件
Jun 11 Javascript
全面解析JavaScript Module模式
Jul 24 Javascript
TypeScript 运行时类型检查补充工具
Sep 28 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
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 文件夹删除、php清除缓存程序
2009/08/25 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
yii操作cookie实例简介
2014/07/09 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
javascript设计模式 封装和信息隐藏(上)
2012/07/24 Javascript
js显示时间 js显示最后修改时间
2013/01/02 Javascript
js 判断控件获得焦点的示例代码
2014/03/04 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
全面解析标签页的切换方式
2016/08/21 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
在Python中表示一个对象的方法
2019/06/25 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
Java中实现多态的机制是什么?
2014/12/07 面试题
internal修饰符起什么作用
2013/12/16 面试题
电钳专业个人求职信
2014/01/04 职场文书
清华大学自主招生自荐信
2014/01/29 职场文书
信息管理专业自荐书
2014/06/05 职场文书
运动会班级口号
2014/06/09 职场文书
大国崛起观后感
2015/06/02 职场文书