Accessing TextNode.style In DOM

For html, I have a bunch of tags which look as follows, which I am using to generate checklists. (some text here...) I've tried a few things to try

Solution 1:

What your trying to style is not possible, Text Node doesn't have style property:

What you'll have to do is wrap the text with something, I'd use a <span>:

<input type="checkbox">
<span class="text>Some Text Here</span>

In your JS:

var texts = document.querySelectorAll('.text');
for(var i = 0, l = textNodes.length; i < l; i++) {
     if(texts[i].previousElementSibling.checked) {
       texts[i].style.textDecoration = 'line-through';
     } else {
       texts[i].style.textDecoration = 'Default';
     }
}

If you use my library NodeList.js you could do:

$$('input:checked').nextElementSibling.style.set('textDecoration', 'line-through');

Solution 2:

I found a solution. I am using a few nested if loops to test for whether the childNode is a text node or a html tag. If it's a text node, I'm collecting the data, and creating a html tag which includes that data. Finally, I am using replaceNode() to insert the updated code. I'm sure that there are better options, and eventually I will replace all the text nodes with tags and use css, but this is working for now.