設定樣式方法setStyle

2021-09-01 01:28:48 字數 1078 閱讀 7331

這個setstyle方法確實避免了mydiv.style.***這種寫法大量重複的**,確實**簡潔了不少,也很直觀,

但是這裡還有乙個問題,如果設定的樣式一多,重複操作dom無法避免,銷毀原樣式並重建都會增加瀏覽器

的開銷。我們可以先生成乙個樣式字串,再一次性設定樣式,這樣可以盡量避免頁面reflow。例如:

//型別判斷

var typec=window.typec||{};

(function(tc);

tc.isobject = function(o) ;

})(typec);

function setstyle(el, style)

var sty="";

if (typec.isstring(style))else if (typec.isobject(style))

}el.style.csstext +=";"+sty;

}

如果引數style傳進來的是字串,那麼直接用csstext設定樣式,如果是個物件,先將物件拼裝成字串,再用csstext設定樣式;

這裡使用了obj.style.csstext=「」;這種寫法,

很蛋疼的是這裡使用了這樣一句:el.style.csstext +=」;」+sty;

原因是:obj.style.csstext=「」;這種寫法會把原有的csstext清掉,比如原來的style中有』display:none;』,那麼執行完上面的js後,display就被刪掉了。

為了解決這個問題,可以採用csstext累加的方法:

element.style.csstext += 』width:100px;height:100px;top:100px;left:100px;』

但是,csstext(假如不為空)在ie中最後乙個分號會被刪掉,比較bt….

因此,上面csstext累加的方法在ie中是無效的。

最後,可以在前面新增乙個分號來解決這個問題:

element.style.csstext += 』;width:100px;height:100px;top:100px;left:100px;』

Vue設定全域性的方法和樣式

vue中我麼會經常用到通用的一些全域性的方法,如何左才能實現全域性的復用減少 累贅呢?我們一般將公用的方法分裝再utils.js檔案中,然後再main.js主入口檔案中將utils.js中的公共的方法通過import引入進來即可,或者我們通過再main.js中設定vue.prototype.func...

獲取設定樣式的相容的方法

設定或獲採樣式相容函式 function css obj,attr,val else else style.currentstyle,getcomputedstyle,getattribute currentstyle是針對ie的,所以上面封裝好的,直接用 為屬性.ele為元素.1.style.是針...

GridView樣式設定

gridview在生成html 的時候會自動加上style border collapse collapse 以及border 1,rules all 這些屬性,這些在ie下都沒什麼影響,但是在ff下就會影響顯示,style border collapse collapse 是由於設定了cellsp...