JQuery's method for modifying the attributes of CSS pseudo elements, jquerycss pseudo elements

JQuery's method for modifying the attributes of CSS pseudo elements, jquerycss pseudo elements

CSS pseudo elements are not DOM elements, so you cannot directly select them.

Suppose there is the following HTML code:

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

And CSS code:

.techbrood:before {width: 0;}

Now you want to dynamically set the width attribute of techbrood: before to 100% in the click event of an element,

There are two ways to add a new style:

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

(Note that this method will affect all elements whose classes are techbrood)

Another method is to add a new class to the element and set the attributes of the new class to change the attributes of the pseudo element:

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

JQuery code:

$('#td_pseudo').addClass("change");

Can the javascript or jquery method change the css pseudo element: before,: after style?

Looks like there is ...... Javascript modifies css to write to the style attribute of the element. The: before,: after pseudo class is a virtual element ...... How to change ...... If you have to modify it, we recommend that you switch to the. info class and design two classes with the before class. You need to modify the elements with the class, for example
. Info: before {
Content: "infomation ";
Border: 1px solid # ccc;
}
. Info_other: before {
Content: "infomation ";
Border: 2px solid #000;
},
Change. info to. info_other when you need to modify it.

How does JQuery change CSS attributes?

$ (Function () {$ (". thumbs "). mouseover (function () {var largePath = $ (this ). attr ("href"); $ ("# largeImg, # imgTag "). attr ({src: largePath}); // set the background ('{zoom'}.css ('backgroundage', 'url ('+ largePath +'); return false ;});}); how is the local zoom-in function written? If any plug-in is used, check whether there is any way to set it.