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

  一般我们都用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>