DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery修改CSS偽元素屬性的方法教程
jQuery修改CSS偽元素屬性的方法教程
編輯:JQuery特效代碼     

CSS偽元素(pseudo elements)不是DOM元素,因此你無法直接選擇到它們。

假設有如下HTML代碼:

<div class="techbrood" id="td_pseudo">techbrood introduction</div>

和CSS代碼:

.techbrood:before {
width: 0;
}

現在你想在某個元素的click事件中動態的把techbrood:before的width屬性設置為100%,

有兩個方法,一個是添加新的樣式:

$('head').append("<style>.techbrood::before{ width:100% }</style>");

(注意該方法將影響所有的class為techbrood的元素)

另外一個方法是為該元素添加新類,並通過設置新類的屬性來達到改變偽元素屬性的效果:

.techbrood.change:before{
width: 100%;
}

jQuery代碼:

$('#td_pseudo').addClass("change");
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved