js批量設(shè)置樣式的三種方法不推薦使用with
更新時間：2013年02月25日 16:58:50 作者：
批量設(shè)置樣式的三種方法:第一種使用JSON/第二種使用cssText/使用第三種with(不推薦使用),感興趣的朋友可以參考下，希望可以幫助到你
一般我們都用css來批量設(shè)置樣式，現(xiàn)在我們用js也可以批量設(shè)置樣式：
總結(jié)三種方法如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標(biāo)題文檔</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>
總結(jié)三種方法如下
復(fù)制代碼 代碼如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標(biāo)題文檔</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>
相關(guān)文章
js跨瀏覽器實現(xiàn)將字符串轉(zhuǎn)化為xml對象的方法
將字符串轉(zhuǎn)化為xml對象需要注意的是該死的ie多版本的問題，具體實現(xiàn)如下，感興趣的朋友不妨參考下本文，希望對大家有所幫助2013-09-09
利用原生JS實現(xiàn)懶加載lazyLoad的三種方法總結(jié)
加載頁面的時候,圖片一直都是流量大頭,針對圖片的性能方法也挺多的比如base64、雪碧圖等;懶加載也是其中一種,這篇文章主要給大家介紹了關(guān)于利用原生JS實現(xiàn)懶加載lazyLoad的三種方法,需要的朋友可以參考下2021-07-07
Electron點擊穿透不規(guī)則窗體的透明區(qū)域的實現(xiàn)
本文主要介紹了Electron點擊穿透不規(guī)則窗體的透明區(qū)域的實現(xiàn)，文中通過示例代碼介紹的非常詳細,具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
本篇文章給大家分享了用11行簡單的JS代碼制作出二維碼生成的簡單功能，有興趣的朋友參考下。2018-03-03
jquery+css3實現(xiàn)網(wǎng)頁背景花瓣隨機飄落特效
在qq空間可以自定義一些插件，裝飾空間，大家通常就是復(fù)制代碼到空間粘貼，會實現(xiàn)非常美觀的效果，有的會隨機飄落一些花瓣，那么這種效果用代碼怎么實現(xiàn)的呢，下面小編給大家詳解jquery實現(xiàn)網(wǎng)頁背景花瓣隨機飄落特效，需要的朋友可以參考下2015-08-08
這篇文章介紹了javascript與cookie 的問題，有需要的朋友可以參考一下2013-11-11
suggestion開發(fā)小結(jié)以及對鍵盤事件的總結(jié)（針對中文輸入法狀態(tài)）
suggestion開發(fā)小結(jié)以及對鍵盤事件的總結(jié)（針對中文輸入法狀態(tài)）,需要的朋友可以參考下。2011-12-12
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)團購或秒殺批量倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
javascript移動設(shè)備Web開發(fā)中對touch事件的封裝實例
這篇文章主要介紹了javascript移動設(shè)備Web開發(fā)中對touch事件的封裝實例,分別對tap事件、doubleTap事件、longTap事件、swipe事件做了封裝,需要的朋友可以參考下2014-06-06
typescript基本數(shù)據(jù)類型HTMLElement與Element區(qū)別
這篇文章主要為大家介紹了typescript基本數(shù)據(jù)類型HTMLElement與Element區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11