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 相关文章推荐
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 Javascript
js自动闭合html标签(自动补全html标记)
Oct 04 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
Javascript中的包装类型介绍
Apr 02 Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 Javascript
原生JavaScript实现拖动校验功能
Sep 29 Javascript
微信小程序tab左右滑动切换功能的实现代码
Feb 08 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 cli 方式 在crotab中运行解决
2010/02/08 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
php实现将Session写入数据库
2015/07/26 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
vue跨域解决方法
2017/10/15 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
Python实战之制作天气查询软件
2019/05/14 Python
python实现倒计时小工具
2019/07/29 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
Python实现序列化及csv文件读取
2020/01/19 Python
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
三好学生自我鉴定
2013/12/17 职场文书
校园安全标语
2014/06/07 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
python入门之算法学习
2021/04/22 Python
Python中requests库的用法详解
2022/06/05 Python
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS