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 SHA-1:Secure Hash Algorithm
Dec 20 Javascript
Javascript Function对象扩展之延时执行函数
Jul 06 Javascript
用jQuery中的ajax分页实现代码
Sep 20 Javascript
javascript中使用正则计算中文长度的例子
Apr 29 Javascript
jQuery中:lt选择器用法实例
Dec 29 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 Javascript
JavaScript组合模式---引入案例分析
May 23 Javascript
jQuery实现购物车全功能
Jan 11 jQuery
JavaScript中的宏任务和微任务详情
Nov 27 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
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 JS Ip地址及域名格式检测代码
2013/09/27 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
python简单实现获取当前时间
2016/08/27 Python
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
Django模板语言 Tags使用详解
2019/09/09 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
windows下python安装pip方法详解
2020/02/10 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
在python3.64中安装pyinstaller库的方法步骤
2020/06/02 Python
python如何导入依赖包
2020/07/13 Python
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
入党自荐书范文
2014/03/09 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
家庭困难证明
2014/10/12 职场文书
环保建议书范文
2015/09/14 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
MySQL Router的安装部署
2021/04/24 MySQL
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang
Pytest中skip skipif跳过用例详解
2021/06/30 Python