首先我們看一下css偽元素是什么:
創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比龍文網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式龍文網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們,業(yè)務(wù)覆蓋龍文地區(qū)。費用合理售后完善,10多年實體公司更值得信賴。
CSS 偽元素用于向某些選擇器設(shè)置特殊效果。
偽元素有哪些:
:first-line 偽元素:"first-line" 偽元素用于向文本的首行設(shè)置特殊樣式。
:first-letter 偽元素:"first-letter" 偽元素用于向文本的首字母設(shè)置特殊樣式。
:before 偽元素:":before" 偽元素可以在元素的內(nèi)容前面插入新內(nèi)容。
:after 偽元素:":after" 偽元素可以在元素的內(nèi)容之后插入新內(nèi)容。
偽元素例子:
.flow_ball1:after {
content: "";
position: absolute;
top: 50%;
margin-top: -1px;
left: 100%;
margin-left: 0.133333rem;
width: 1.786667rem;
height: 2px;
background-color: #ff6600;
border-radius: 0.053333rem;
在名為flow_ball1的class標簽后面添加一道橘色橫線(類似于流程圖那種)
那么,問題來了,怎么用jquery改變偽元素的樣式呢?
答案在這里:
$('.flow_ball1').append("style#fafang::after{display:none}/style");
JQ修改樣式:
$("選擇器名稱").css({"屬性名“:"屬性值","屬性名“:"屬性值","屬性名“:"屬性值"});屬性可寫多個也可以寫一個。
$(".more_button").toggle(
function(){
$(".more_button").css("background","red");},
function(){
$(".more_button").css("background","blue");}
);
JQ為CSS添加樣式,可以使用jQuery CSS 操作 的css() 方法
定義和用法
css() 方法返回或設(shè)置匹配的元素的一個或多個樣式屬性。
設(shè)置 CSS 屬性
設(shè)置所有匹配元素的指定 CSS 屬性。
$(selector).css(name,value)
實例
/*將所有段落的顏色設(shè)為紅色:*/
$("p").css("color","red");
設(shè)置多個 CSS 屬性/值對
$(selector).css({property:value,?property:value,?...})
把“名/值對”對象設(shè)置為所有匹配元素的樣式屬性。
這是一種在所有匹配的元素上設(shè)置大量樣式屬性的最佳方式。
實例
實例
$("p").css({
"color":"white",
"background-color":"#98bf21",
"font-family":"Arial",
"font-size":"20px",
"padding":"5px"
});
也可以通過Jquery 屬性操作的removeClass、addClass方法移除元素類名或者添加元素類名的方式達到修改元素樣式的效果。詳細內(nèi)容可以百度“jQuery 參考手冊 - 屬性操作”