Dynamically create class, override class attribute

Posted May 27, 20201 min read

First explain the problem

Use carousel swiper plugin, and can customize(color selector selection) pagination dot size and color. I encountered this problem when customizing colors
As shown in the figure, the two dot styles are .swiper-pagination-bullet unchecked and swiper-pagination-bullet-active checked styles. There are other places in the project and custom colors. I am directly modifying the css implementation, but this place directly modifies the css carousel. The dot style will not change. So you need to dynamically create a class.

 $("<style> </style>"). text(". swiper-pagination-bullet-active {background-color:red;")
.appendTo($(". swiper-pagination"));
After modification