Is there a way to apply css to part of the element?

I am looking for a way to apply new css to only part of the element.

For example. The original html looks like

<p>123456</p>  

I want to make only 456 into bold.

Of course, I can do it by adding another tag into 456 like

<p>123<b>456</b></p>  

But in my application, I do want not to change the original DOM structure. By adding new tag, I changed DOM structure.

To do that, I am thinking of adding new custom attribute to the existing tag like

<p data-wms="e-3">123456</p>  

Here data-wms means that there are special part and e-3 means that from index 3 character (it is 4 here) to the end will have special attribute (like bold in this example)

Now I have all the information where to change inside the element.

But still how can I do that with javascript without adding tag, without changing dom.

Thanks

https://stackoverflow.com/questions/66620101/is-there-a-way-to-apply-css-to-part-of-the-element March 14, 2021 at 09:04AM