Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
A quick'n'dirty way of doing some lettering.js stuff without jQuery.
<!DOCTYPE html>
<html lang="en">
.slogan span:nth-child(odd) {
color: red;
<span class="slogan">Testing</span>
function sliceString(selector) {
if (!document.querySelector) return;
var string = document.querySelector(selector).innerText,
total = string.length,
html = '';
for (var i=0; i<total; i++) {
var letter = string.charAt(i);
html+= '<span class="'+letter+'">'+letter+'</span>';
document.querySelector(selector).innerHTML = html;
Copy link

aamarks commented Jul 24, 2015

Thanks! One problem though, to get your example to work in FireFox I had to change innerText to innerHTML: var string = document.querySelector(selector).innerText

I don't know much javascript so not sure if that would cause other problems...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment