資訊專欄INFORMATION COLUMN
摘要：而且每添加或修改腳本的代碼量遠(yuǎn)大于我們修改樣式的代碼量。所以與其使用直接改變某個(gè)元素的樣式不如通過(guò)代碼去更新這個(gè)元素的屬性。
一、style與className屬性的對(duì)比
在前面的style屬性學(xué)習(xí)中,知道了通過(guò)style屬性可以控制元素的樣式,從而實(shí)現(xiàn)了行為層通過(guò)DOM的style屬性去干預(yù)變現(xiàn)層顯示的目地,但是這種就是不好的,而且為了實(shí)現(xiàn)通過(guò)DOM腳本設(shè)置的樣式，你就不得不花時(shí)間去研究JavaScript函數(shù),去尋找對(duì)應(yīng)修改和設(shè)置樣式的有關(guān)語(yǔ)句。而且每添加或修改js腳本的代碼量遠(yuǎn)大于我們修改css樣式的代碼量。
所以與其使用DOM直接改變某個(gè)元素的樣式,不如通過(guò)JavaScript代碼去更新這個(gè)元素的class屬性。
下面通過(guò)代碼來(lái)比較這兩種方式的差別:
function setStyleHeaderSiblings() {
if (!checkCompatibility()) return; //check compatibility
var heads = document.getElementsByTagName("h1");
var ele; //defines a element for receive;
for (var i = 0; i < heads.length; i++) {
ele = getNextElement(heads[i].nextSibling);
ele.style.fontWeight = "bold";
ele.style.fontSize = "1.2em";
}
}
function setStyleHeaderSiblings() {
if (!checkCompatibility()) return; //check compatibility
var heads = document.getElementsByTagName("h1");
var ele; //defines a element for receive;
for (var i = 0; i < heads.length; i++) {
ele = getNextElement(heads[i].nextSibling);
ele.className="change";
}
css樣式表
.change{
font-weight:bold;
font-size:1.2em;
}
?
假設(shè)我們這個(gè)需要給這個(gè)效果加上一個(gè)
上面這種做法需要在js里面加如下代碼:
ele.style.backgroundColor="blue";
而第二種做法則只要在樣式表里加一個(gè)樣式就可以實(shí)現(xiàn),而且實(shí)現(xiàn)了樣式與行為的分離,還減少了我們的代碼量,所以在后期需求不確定的情況下,我建議第二種方法來(lái)動(dòng)態(tài)的修改元素的樣式。
二、追加class類名
但是通過(guò)className設(shè)置元素的樣式也有一個(gè)缺陷,那就是通過(guò)className設(shè)置元素的class屬性時(shí)將替換(而不是追加)該元素原有的class屬性,在實(shí)際開發(fā)中往往很多時(shí)候我們需要追加class；
所以根據(jù)這個(gè)需要我們可以自定義一個(gè)方法來(lái)實(shí)現(xiàn)追加className的效果代碼如下:
function addClass(element,value) {
if (!element.className) {
element.className = value;
} else {
newClassName = element.className;
newClassName += " "; //這句代碼追加的類名分開
newClassName += value;
element.className = newClassName;
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1491.html
摘要：與元素屬性原生對(duì)于元素的屬性有三種方法來(lái)操作為元素添加屬性名和屬性值獲取元素屬性值刪除元素屬性而則將以上三個(gè)操作簡(jiǎn)化為和對(duì)應(yīng)對(duì)應(yīng)對(duì)應(yīng)上述的為屬性名，為屬性值對(duì)于需要設(shè)置多個(gè)屬性時(shí)，采用的方式是在方法傳入屬性配置對(duì)象元素值屬性三個(gè)方法都 attr與removeAttr - 元素屬性 JS原生對(duì)于元素的屬性有三種方法來(lái)操作 dom.setAttribute(name , value) //...
摘要：插件分類插件通常會(huì)為添加全局功能，插件的編寫方法一般分為類，如上圖所示的插件應(yīng)當(dāng)有一個(gè)公開方法。 前言 前段時(shí)間看到黃軼老師的一篇文章感觸頗多。特別是下面這一段話 插件 Vue 化引發(fā)的一些思考這篇文章我不僅僅是要教會(huì)大家封裝一個(gè) scroll 組件，還想傳遞一些把第三方插件（原生 JS 實(shí)現(xiàn)）Vue 化的思考過(guò)程。很多學(xué)習(xí) Vue.js 的同學(xué)可能還停留在 XX 效果如何用 Vue....
摘要：方法也在讀源碼之內(nèi)部方法有過(guò)分析。不太明白為什么要用全局變量來(lái)接收，用局部變量不是更好點(diǎn)嗎保存當(dāng)前類的字符串，使用函數(shù)獲得。這是的依然是全局變量，但是接收的是當(dāng)前元素的當(dāng)前樣式類字符串為什么不用局部變量呢。 這篇依然是跟 dom 相關(guān)的方法，側(cè)重點(diǎn)是操作樣式的方法。 讀Zepto源碼系列文章已經(jīng)放到了github上，歡迎star: reading-zepto 源碼版本 本文閱讀的源碼為...
摘要：如何轉(zhuǎn)換知道了二者的不同，那么如何轉(zhuǎn)換我們也就有方向了。因?yàn)橄旅總€(gè)元件本身就是一個(gè)普通的組件，我們可以通過(guò)直接把他們當(dāng)作其他組件轉(zhuǎn)換為的代碼來(lái)使用。至于如何把這個(gè)放到上，我們放到后面一起說(shuō)。 背景最近接手公司的一個(gè)移動(dòng)端項(xiàng)目，是通過(guò) Rax 作為 dsl 開發(fā)的，在發(fā)布的時(shí)候構(gòu)建多分代碼，在 APP 端編譯為能夠運(yùn)行在 weex 上的代碼，在 H5（跑在瀏覽器或者 webview 里面...
摘要：微信小游戲推出已有幾天了，這個(gè)功能對(duì)小程序和小游戲的推動(dòng)影響不用多說(shuō)，大家趕緊摩拳擦掌往上擼就可以了。打飛機(jī)小游戲使用無(wú)模式創(chuàng)建一個(gè)微信小游戲后可以看到官方，其中入口文件和配置文件和。 微信小游戲推出已有幾天了，這個(gè)功能對(duì)小程序和小游戲的推動(dòng)影響不用多說(shuō)，大家趕緊摩拳擦掌往上擼就可以了。關(guān)于如何開發(fā)官方文檔已經(jīng)說(shuō)明了，這篇?jiǎng)t是對(duì)官方的打飛機(jī)demo一些小改造。 開發(fā)預(yù)備式 下載最新版...
閱讀 2513·2021-10-14 09:42
閱讀 1151·2021-09-22 15:09
閱讀 3557·2021-09-09 09:33
閱讀 3037·2021-09-07 09:59
閱讀 3652·2021-09-03 10:34
閱讀 3555·2021-07-26 22:01
閱讀 2836·2019-08-30 13:06
閱讀 1217·2019-08-30 10:48
