zl程序教程

您现在的位置是:首页 >  后端

当前栏目

js批量设置样式的三种方法不推荐使用with

JS批量方法 使用 设置 推荐 with 三种
2023-06-13 09:14:46 时间
一般我们都用css来批量设置样式,现在我们用js也可以批量设置样式:
总结三种方法如下
复制代码代码如下:

<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>无标题文档</title>
<styletype="text/css">
#div1{width:100px;height:100px;background:#069;}
</style>
<scripttype="text/javascript">
//第一种使用JSON
functionsetStyle(obj,json){
for(variinjson)
{
obj.style[i]=json[i];
}
}
window.onload=function(){
varoDiv=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>
<divid="div1"></div>
</body>
</html>