jQuery如何改变css伪元素样式

html-css016

jQuery如何改变css伪元素样式,第1张

首先我们看一下css伪元素是什么:

CSS 伪元素用于向某些选择器设置特殊效果。

伪元素有哪些:

:first-line 伪元素:"first-line" 伪元素用于向文本的首行设置特殊样式。

:first-letter 伪元素:"first-letter" 伪元素用于向文本的首字母设置特殊样式。

:before 伪元素:":before" 伪元素可以在元素的内容前面插入新内容。

:after 伪元素:":after" 伪元素可以在元素的内容之后插入新内容。

伪元素例子:

.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>")

//1、获取和设置样式

$("#tow").attr("class")//获取ID为tow的class属性

$("#two").attr("class","divClass")//设置Id为two的class属性。

//2、追加样式

$("#two").addClass("divClass2")//为ID为two的对象追加样式divClass2

//3、移除样式

$("#two").removeClass("divClass")//移除 ID为two的对象的class名为divClass的样式。

$(#two).removeClass("divClass divClass2")移除多个样式。

//4、切换类名

$("#two").toggleClass("anotherClass") //重复切换anotherClass样式

//5、判断是否含有某项样式

$("#two").hasClass("another")==$("#two").is(".another")

//6、获取css样式中的样式

$("div").css("color")// 设置color属性值. $(element).css(style)

//设置单个样式

$("div").css("color","red")

//7设置多个样式

$("div").css({fontSize:"30px",color:"red"})

$("div").css("height","30px")==$("div").height("30px")

$("div").css("width","30px")==$("div").height("30px")

<div class="test">使用jquery修改css中带有important的样式属性</div>

外部样式为:

div.test{

width:auto !important

overflow:auto !important

}

通过 $("div.test").css("width","100px")和 $("div.test").css("width","100px !important")是无效的

要想修改div的width,可以通过如下这种方式:

$("div.test").css("cssText", "width:650px !important")要想修改多个属性,可以这么做:

$("div.test").css("cssText", "width:650px !importantoverflow:hidden !important")