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中实现简单的tabs插件功能的代码
Mar 02 Javascript
jquery中dom操作和事件的实例学习-表单验证
Nov 30 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
js 走马灯简单实例
Nov 21 Javascript
js中string转int把String类型转化成int类型
Aug 13 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
May 03 Javascript
基于vue实现分页效果
Nov 06 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
Jul 24 Javascript
Vue实现购物车基本功能
Nov 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
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
让你的PHP同时支持GIF、png、JPEG
2006/10/09 PHP
PHP CKEditor 上传图片实现代码
2009/11/06 PHP
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
tp5框架的增删改查操作示例
2019/10/31 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
使用Modello编写JavaScript类
2006/12/22 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
vue之nextTick全面解析
2017/05/17 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
python处理按钮消息的实例详解
2017/07/11 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
python django model联合主键的例子
2019/08/06 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
python 实现两个npy档案合并
2020/07/01 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
HTML5等待加载动画效果
2017/07/27 HTML / CSS
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
上课看小说检讨书
2014/02/22 职场文书
基层党员对照检查材料
2014/09/24 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
学生会招新宣传语
2015/07/13 职场文书
小学毕业感言200字
2015/07/30 职场文书
详解TS数字分隔符和更严格的类属性检查
2021/05/06 Javascript
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers