How to set the communication element from an array?

Wanted to make the first letter of the color red, but something went wrong.
<p class="try">SLIDER</p>
the <script>
function changeColor() {
 var z = document.querySelector(".try").innerHTML;
 z[0].style.color = "red";
}
document.body.onclick = changeColor;
</script>
July 2nd 19 at 17:50
3 answers
July 2nd 19 at 17:52
Solution
Get innerHTML. This property contains the HTML code that is not an array.

UPD: the crooked read the question. The pseudo-element ::first-letter will help you.
How to apply it in js?
the only search engine in the css about this issue. - Ewell commented on July 2nd 19 at 17:55
Actually, I would like not only with the first letter to rotate, is this possible? - Ewell commented on July 2nd 19 at 17:58
: only if you break down the word into letters.

And to use in JS, make a class in CSS and JS hang a class on the element is good. - Winston.Huel16 commented on July 2nd 19 at 18:01
: here it is:
<span>b</span><span>have</span><span>to</span><span>in</span><span>s</span>
- Winston.Huel16 commented on July 2nd 19 at 18:04
July 2nd 19 at 17:54
Solution
Use the css pseudo-element::first-letter
How to apply it in js?
the only search engine in the css about this issue. - Ewell commented on July 2nd 19 at 17:57
in css to do if you want to paint the letter. If you want to change the color of arbitrary letters, then each letter needs to be wrapped in a DOM element, such as span - Ewell commented on July 2nd 19 at 18:00
July 2nd 19 at 17:56
fakticheski, here in this place a different algorithm
var z = document.querySelector(".try").innerHTML;
now replace the first letter in S, and return all in innerHTML

Find more questions by tags JavaScript