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 相关文章推荐
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
动态加载脚本提升javascript性能
Feb 24 Javascript
jQuery设置与获取HTML,文本和值的简单实例
Feb 26 Javascript
分享jQuery网页元素拖拽插件
Dec 01 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 Javascript
layui lay-verify form表单自定义验证规则详解
Sep 18 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多个版本的分析解释
2011/07/21 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
php创建session的方法实例详解
2015/01/27 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
Python urls.py的三种配置写法实例详解
2017/04/28 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
python编写简单端口扫描器
2019/09/04 Python
python实现简易淘宝购物
2019/11/22 Python
如何表示python中的相对路径
2020/07/08 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
端口镜像是怎么实现的
2014/03/25 面试题
大专生自荐信
2013/10/04 职场文书
迷你西餐厅创业计划书范文
2013/12/31 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
低碳生活倡议书
2014/04/14 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书