JavaScript implements modifying pseudo-class styles

小云云

Release： 2017-12-07 15:58:13

Original

1538 people have browsed it

In projects, we often need to use JavaScript to dynamically control the style of elements (:before,:after), but we all know that JavaScript or jQuery does not have pseudo-class selectors. In this article, we mainly introduce the method of modifying pseudo-class styles in JavaScript and the code implementation process.

HTML

Hi, this is a plain-old, sad-looking paragraph tag.

CSS

.red::before { content: 'red'; color: red; }

Copy after login

Method 1

Use JavaScript or jQuery to switch

The class name of the element, modify the style.

.green::before { content: 'green'; color: green; } $('p').removeClass('red').addClass('green');

Copy after login

Method 2

Dynamically insert new styles into existing').appendTo('head');

Copy after login

Method 4

Use HTML5 data-attribute , use attr() in the attribute to modify it dynamically.

Hi, this is plain-old, sad-looking paragraph tag.
.red::before {
content: attr(data-attr);
color: red;
}
$('.red').attr('data-attr', 'green');

Copy after login

Related recommendations:

Summary of pseudo-class selectors

Pseudo-types in PHP And pseudo-variables

php function regular parameter function and pseudo-type parameter function

The above is the detailed content of JavaScript implements modifying pseudo-class styles. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

javascript js style

source：php.cn

Previous article：JS solves the knapsack problem based on greedy algorithm Next article：Development of javascript font color control

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn