整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
Query修改CSS偽元素屬性的方法
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");方的風太大，吹得窗戶咚咚作響，小白自從上午用了jQuery事件后，一直沉浸在鼠標控制容器內容的練習里面，周圍無論多大的噪音也干擾不了他。中午太陽很好，低頭族們又來到小白旁邊向陽的窗口扎堆曬太陽。其中一人無意間看到了小白真正擺弄的頁面，感到很好奇，說道：“哇！小白，這是你做的么？”
小白得意的說道：“必須的！”
“小白你真了不起，幾天不見居然都會高科技了！”，“哇！小白，真佩服你，你居然會寫程序！”。。。。。。
正當小白沉浸在贊美聲中無法自拔的時候，小白的身旁響起了老朱的聲音：“小白！醒醒！今天哥再告你個好玩的知識！”
“好玩的知識？”，小白眼里放出了驚喜的目光。
“對，通過jQuery可以改變元素的css樣式，這個好玩吧！你用jQuery實現鼠標移入移出的功能了吧？讓我看看”
“矮油！不錯哦～！現在咱把鼠標以上以后的處理改一下，不要更改它的html內容了，變成更改CSS樣式。更改CSS樣式通過css(樣式屬性名,樣式屬性值進行更改，比如更改main里面文本的顏色，我們可以這樣寫：$("#main").css("color","#F00");”
“現在執行我們看一下效果吧”
“這個效果太棒了，可是鼠標移出以后怎么恢復呢？”
“你在移出的代碼里面增加一個更改文本顏色就可以了！試試看！”
“成功了，是不是所有的樣式都可以更改？”
“那當然，不過有個知識點你得了解一下，在css里面很多樣式屬性的默認值是none，比如容器main的border屬性設置為none的效果跟沒給容器設置border的效果是一樣的。具體哪些css樣式的屬性默認值是none，你可以在一個空網頁中寫一個div標簽，不要給它設置任何css樣式，然后通過console.log($('div').css('屬性名'))在控制臺看看它的默認值。這個工作你有時間了自己測試一下，我就不多說了，現在你做這樣一個功能，鼠標移到main容器上時改變容器的高度、背景色、行高、文字大小，移出后恢復原來的狀態。”
“好的，我試試！”
二十分鐘后小白找到老朱，“做好了！”
“很好，小白。不過這個方法雖好，可有時需要改變的樣式太多，以至于我們會寫很多行代碼。還有一個方法可以通過添加、刪除class或者直接更改容器的class屬性值進行設置。添加class使用addClass("類名")，刪除class使用removeClass("類名")。我們可以這樣來做！”
“你也可以直接更改div標簽上的class屬性值，更改屬性我近期會跟你說怎么做，你現在會這兩種更改樣式的方法就可以了。添加和刪除class會精簡js代碼的行數，直接更改css樣式的屬性值呢又很方便，在真正使用的時候你要學會靈活運用。好了你可以自己練習了～～”
想學H5的朋友可以關注老爐，您的關注是我持續更新《小白H5成長之路》的動力！
1、jQuery 提供一系列與 DOM 相關的方法，這使訪問和操作元素和屬性變得很容易
1、text() - 設置或返回所選元素的文本內容
2、html() - 設置或返回所選元素的內容（包括 HTML 標記）
3、val() - 設置或返回表單字段的值
4、獲取屬性
1、text() - 設置或返回所選元素的文本內容
2、html() - 設置或返回所選元素的內容（包括 HTML 標記）
3、val() - 設置或返回表單字段的值
1、通過 jQuery，可以很容易地添加新元素/內容
2、append() - 在被選元素的結尾插入內容
3、prepend() - 在被選元素的開頭插入內容
4、after() - 在被選元素之后插入內容
5、before() - 在被選元素之前插入內容
1、通過 jQuery，可以很容易地刪除已有的 HTML 元素
2、remove() - 刪除被選元素（及其子元素）
3、empty() - 從被選元素中刪除子元素
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
