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

資訊專欄INFORMATION COLUMN

JS中的className操作

劉厚水 / 1225人閱讀

摘要：檢查元素是否已經(jīng)存在某下面的正則表達(dá)式用來檢查元素是否已經(jīng)存在某個使用操作使用操作現(xiàn)代瀏覽器都支持使用方法來操作元素的，但是中不支持該方法，即使使用了

添加className

(1)修改元素的“所有”的 class

用新的 class 替換掉原有的所有 class，可以設(shè)置 className 屬性：

document.getElementById("MyElement").className = "MyClass";

（如果想替換為多個 class，可以使用空格分隔。）

(2)為元素添加新的 class

如果想添加一個新的 class，并保留所有原有的 class，可以：

document.getElementById("MyElement").className += " MyClass";

（注意 MyClass 前面的空格。）

刪除className

(1)刪除元素的某個 class

如果要刪除某個元素的單個 class 屬性，而不影響其它 class，可以使用正則表達(dá)式進(jìn)行替換：

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|s)MyClass(?!S)/g , "" )

正則表達(dá)式解釋：

(?:^|s) # 匹配字符串開始，或者單個空白字符。以字符串開頭或者以空格開頭
MyClass  # 需要移除的 class 值
(?!S)   # negative lookahead to verify the above is the whole classname
         # ensures there is no non-space character following
         # (i.e. must be end of string or a space)

g 可以進(jìn)行全局匹配。
檢查元素是否已經(jīng)存在某 class

下面的正則表達(dá)式用來檢查元素是否已經(jīng)存在某個 class：

if ( document.getElementById("MyElement").className.match(/(?:^|s)MyClass(?!S)/) )
使用jQuery操作className 
$("#MyElement").addClass("MyClass");

$("#MyElement").removeClass("MyClass");

if ( $("#MyElement").hasClass("MyClass") )

$("#MyElement").toggleClass("MyClass");
使用HTML5 操作 classes

現(xiàn)代瀏覽器都支持使用classList方法來操作元素的className，但是IE10中不支持該方法，即使使用了shim

document.getElementById("MyElement").classList.add("class");

document.getElementById("MyElement").classList.remove("class");

if ( document.getElementById("MyElement").classList.contains("class") )

document.getElementById("MyElement").classList.toggle("class");

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

相關(guān)文章

  • jQuery 源碼系列（十八）class 相關(guān)操作

    摘要：眼看的源碼就快到頭了，后面還有幾個重要的內(nèi)容，包括和動畫操作，加油把它們看完，百度前端學(xué)院的新一批課程也開始了。，當(dāng)?shù)诙€參數(shù)為的情況，就是，為時，，從源碼來看，就是直接調(diào)用的這兩個函數(shù)。參考源碼分析樣式操作本文在上的源碼地址，歡迎來。 歡迎來我的專欄查看系列文章。 眼看 jQuery 的源碼就快到頭了，后面還有幾個重要的內(nèi)容，包括 ajax 和動畫操作，加油把它們看完，百度前端學(xué)院的...

    BingqiChen 評論0 收藏0

  • 從規(guī)范去看Function.prototype.apply到底是怎么工作的？

    摘要：如果是或者，會將作為值。否則，被調(diào)用的函數(shù)，進(jìn)行轉(zhuǎn)換后，作為值。又怎么操作這個很神奇。能轉(zhuǎn)換它的參數(shù)為到總共個整數(shù)中的一個，這個函數(shù)遵循以下規(guī)則。不斷加入新方法的規(guī)范也是這個初衷。 showImg(https://segmentfault.com/img/remote/1460000012563719); 今天看element-react源碼的時候，又看到了這張似曾相識卻又異常陌生的老...

    tanglijun 評論0 收藏0

  • 原生JS操作DOM元素的類名class

    摘要：如果這些類已經(jīng)存在于元素的屬性中，那么它們將被忽略。刪除指定的類值。按集合中的索引返回類值。用一個新類替換已有類。 1.classList 詳見MDN Element.classList add( String [, String] )添加指定的類值。如果這些類已經(jīng)存在于元素的屬性中，那么它們將被忽略。remove( String [,String] )刪除指定的類值。item ( N...

    liujs 評論0 收藏0

  • 原生JS操作DOM元素的類名class

    摘要：如果這些類已經(jīng)存在于元素的屬性中，那么它們將被忽略。刪除指定的類值。按集合中的索引返回類值。用一個新類替換已有類。 1.classList 詳見MDN Element.classList add( String [, String] )添加指定的類值。如果這些類已經(jīng)存在于元素的屬性中，那么它們將被忽略。remove( String [,String] )刪除指定的類值。item ( N...

    lemanli 評論0 收藏0

  • 原生JS操作DOM元素的類名class

    摘要：如果這些類已經(jīng)存在于元素的屬性中，那么它們將被忽略。刪除指定的類值。按集合中的索引返回類值。用一個新類替換已有類。 1.classList 詳見MDN Element.classList add( String [, String] )添加指定的類值。如果這些類已經(jīng)存在于元素的屬性中，那么它們將被忽略。remove( String [,String] )刪除指定的類值。item ( N...

    QLQ 評論0 收藏0

發(fā)表評論

0條評論

劉厚水

男|高級講師

TA的文章

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