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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
Mar 01 Javascript
JavaScript事件委托的技术原理探讨示例
Apr 17 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
微信小程序实现下拉框功能
Jul 16 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 Javascript
js 解析 JSON 数据简单示例
Apr 21 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
php知道与问问的采集插件代码
2010/10/12 PHP
PHP字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
解决PHP里大量数据循环时内存耗尽的方法
2015/10/10 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
jQuery 使用手册(一)
2009/09/23 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
删除条目时弹出的确认对话框
2014/06/05 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
jquery增加和删除元素的方法
2015/01/14 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
js实现仿qq消息的弹出窗效果
2016/01/06 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
Python中的连接符(+、+=)示例详解
2017/01/13 Python
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
Python封装原理与实现方法详解
2018/08/28 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
python的re模块使用方法详解
2019/07/26 Python
django rest framework serializers序列化实例
2020/05/13 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
简历中自我评价分享
2013/10/09 职场文书
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
施工安全责任书范本
2014/07/24 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
pytorch显存一直变大的解决方案
2021/04/08 Python