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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
10个实用的脚本代码工具
May 04 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
avalon js实现仿微博拖动图片排序
Aug 14 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
微信小程序 标签传入数据
May 08 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 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学习教程之第2天
2008/06/15 PHP
php操作MongoDB类实例
2015/06/17 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
起点页面传值js,有空研究学习下
2010/01/25 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
python ChainMap的使用和说明详解
2019/06/11 Python
Django多数据库的实现过程详解
2019/08/01 Python
Python读取csv文件实例解析
2019/12/30 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
省级四好少年事迹材料
2014/01/25 职场文书
学生会干部自荐信
2014/02/04 职场文书
个性婚礼策划方案
2014/05/17 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技