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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
ES6正则的扩展实例详解
Apr 25 Javascript
vue数据双向绑定的注意点
Jun 23 Javascript
js排序与重组的实例讲解
Aug 28 Javascript
vue-cli的eslint相关用法
Sep 29 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
JavaScript实现的拼图算法分析
Feb 13 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
索尼ICF-SW100收音机评测
2021/03/02 无线电
php+dbfile开发小型留言本
2006/10/09 PHP
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
2015/03/04 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
python uuid模块使用实例
2015/04/08 Python
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
python黑魔法之编码转换
2016/01/25 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
Python学生信息管理系统修改版
2018/03/13 Python
Python模块的加载讲解
2019/01/15 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
python的debug实用工具 pdb详解
2019/07/12 Python
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
《陈毅探母》教学反思
2014/05/01 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
优秀教研组申报材料
2014/12/26 职场文书
2015社区个人工作总结范文
2015/05/13 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
穷人该怎么创业?谨记以下几点
2019/07/11 职场文书
Python自动化测试PO模型封装过程详解
2021/06/22 Python
详细了解java监听器和过滤器
2021/07/09 Java/Android