CODEWITHSUNDEEP
javascripthtmlcssparagraph
user3489612
user3489612

Reputation: 1

Is there a way to change HTML text styles line by line in js?

This is a bit of an unusual question, but is it possible in javascript to change text styles for every other line? Let me be a bit more specific. Assume I have a page with several paragraphs. What I want to do is alternate text styles (font color or background color) for each line, as they appear on my screen.

Here's the idea. I'd like to make a browser extension that automatically colors every other line in a paragraph to make it easier for readers to follow along with what they are reading on a page. Thoughts? If it's possible, how should I go about writing this?

Upvotes: 0

Views: 239

Answers (1)

ray
ray

Reputation: 27245

If you knew the line height you could create a repeating background gradient to match. (And you could figure out the line-height with javascript if you had to.)

p {
  --spacing: 1.5rem;
  line-height: var(--spacing);
  background-image: repeating-linear-gradient(transparent 0 var(--spacing), skyblue var(--spacing) calc(var(--spacing) * 2));
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Upvotes: 2

Related Questions