国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JS之ClassName屬性使用

Ocean / 2654人閱讀

摘要：而且每添加或修改腳本的代碼量遠(yuǎn)大于我們修改樣式的代碼量。所以與其使用直接改變某個元素的樣式不如通過代碼去更新這個元素的屬性。

一、style與className屬性的對比

在前面的style屬性學(xué)習(xí)中,知道了通過style屬性可以控制元素的樣式,從而實現(xiàn)了行為層通過DOM的style屬性去干預(yù)變現(xiàn)層顯示的目地,但是這種就是不好的,而且為了實現(xiàn)通過DOM腳本設(shè)置的樣式，你就不得不花時間去研究JavaScript函數(shù),去尋找對應(yīng)修改和設(shè)置樣式的有關(guān)語句。而且每添加或修改js腳本的代碼量遠(yuǎn)大于我們修改css樣式的代碼量。

所以與其使用DOM直接改變某個元素的樣式,不如通過JavaScript代碼去更新這個元素的class屬性。

下面通過代碼來比較這兩種方式的差別:

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è)我們這個需要給這個效果加上一個

上面這種做法需要在js里面加如下代碼:

ele.style.backgroundColor="blue";

而第二種做法則只要在樣式表里加一個樣式就可以實現(xiàn),而且實現(xiàn)了樣式與行為的分離,還減少了我們的代碼量,所以在后期需求不確定的情況下,我建議第二種方法來動態(tài)的修改元素的樣式。

二、追加class類名

但是通過className設(shè)置元素的樣式也有一個缺陷,那就是通過className設(shè)置元素的class屬性時將替換(而不是追加)該元素原有的class屬性,在實際開發(fā)中往往很多時候我們需要追加class；

所以根據(jù)這個需要我們可以自定義一個方法來實現(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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1491.html

相關(guān)文章

  • jquery梳理之屬性操作

    摘要：與元素屬性原生對于元素的屬性有三種方法來操作為元素添加屬性名和屬性值獲取元素屬性值刪除元素屬性而則將以上三個操作簡化為和對應(yīng)對應(yīng)對應(yīng)上述的為屬性名，為屬性值對于需要設(shè)置多個屬性時，采用的方式是在方法傳入屬性配置對象元素值屬性三個方法都 attr與removeAttr - 元素屬性 JS原生對于元素的屬性有三種方法來操作 dom.setAttribute(name , value) //...

    silencezwm 評論0 收藏0

  • vue之插件編寫

    摘要：插件分類插件通常會為添加全局功能，插件的編寫方法一般分為類，如上圖所示的插件應(yīng)當(dāng)有一個公開方法。 前言 前段時間看到黃軼老師的一篇文章感觸頗多。特別是下面這一段話 插件 Vue 化引發(fā)的一些思考這篇文章我不僅僅是要教會大家封裝一個 scroll 組件，還想傳遞一些把第三方插件（原生 JS 實現(xiàn)）Vue 化的思考過程。很多學(xué)習(xí) Vue.js 的同學(xué)可能還停留在 XX 效果如何用 Vue....

    xuexiangjys 評論0 收藏0

  • 讀 Zepto 源碼之樣式操作

    摘要：方法也在讀源碼之內(nèi)部方法有過分析。不太明白為什么要用全局變量來接收，用局部變量不是更好點(diǎn)嗎保存當(dāng)前類的字符串，使用函數(shù)獲得。這是的依然是全局變量，但是接收的是當(dāng)前元素的當(dāng)前樣式類字符串為什么不用局部變量呢。 這篇依然是跟 dom 相關(guān)的方法，側(cè)重點(diǎn)是操作樣式的方法。 讀Zepto源碼系列文章已經(jīng)放到了github上，歡迎star: reading-zepto 源碼版本 本文閱讀的源碼為...

    snowell 評論0 收藏0

  • 如何把 alibaba Rax 組件轉(zhuǎn)換到 React 下

    摘要：如何轉(zhuǎn)換知道了二者的不同，那么如何轉(zhuǎn)換我們也就有方向了。因為下每個元件本身就是一個普通的組件，我們可以通過直接把他們當(dāng)作其他組件轉(zhuǎn)換為的代碼來使用。至于如何把這個放到上，我們放到后面一起說。 背景最近接手公司的一個移動端項目，是通過 Rax 作為 dsl 開發(fā)的，在發(fā)布的時候構(gòu)建多分代碼，在 APP 端編譯為能夠運(yùn)行在 weex 上的代碼，在 H5（跑在瀏覽器或者 webview 里面...

    Hydrogen 評論0 收藏0

  • 微信小游戲體驗之打飛機(jī)改造計劃

    摘要：微信小游戲推出已有幾天了，這個功能對小程序和小游戲的推動影響不用多說，大家趕緊摩拳擦掌往上擼就可以了。打飛機(jī)小游戲使用無模式創(chuàng)建一個微信小游戲后可以看到官方，其中入口文件和配置文件和。 微信小游戲推出已有幾天了，這個功能對小程序和小游戲的推動影響不用多說，大家趕緊摩拳擦掌往上擼就可以了。關(guān)于如何開發(fā)官方文檔已經(jīng)說明了，這篇則是對官方的打飛機(jī)demo一些小改造。 開發(fā)預(yù)備式 下載最新版...

    dongfangyiyu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<