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 相关文章推荐
javascript中的几个运算符
Jun 29 Javascript
jquery提交form表单时禁止重复提交的方法
Feb 13 Javascript
Java Mybatis框架入门基础教程
Sep 21 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
Javascript动画效果(1)
Oct 11 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
js仿微信抢红包功能
Sep 25 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 Javascript
关于RxJS Subject的学习笔记
Dec 05 Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 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
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
php动态实现表格跨行跨列实现代码
2012/11/06 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
JavaScript类和继承 prototype属性
2010/09/03 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
python转换摩斯密码示例
2014/02/16 Python
python元组操作实例解析
2014/09/23 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
Python数据处理numpy.median的实例讲解
2018/04/02 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
python实现京东秒杀功能
2018/07/30 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
啤酒销售实习自我鉴定
2013/09/24 职场文书
八年级英语教学反思
2014/01/09 职场文书
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
建议书怎么写
2014/03/12 职场文书
热门专业求职信
2014/05/24 职场文书
消防工作实施方案
2014/06/09 职场文书
先进单位事迹材料
2014/12/25 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python
FP-growth算法发现频繁项集——构建FP树
2021/06/24 Python
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python