对于html，我有一堆看起来如下的标签，这些标签用于生成清单。
<input type="checkbox"/> (some text here...)
我已经尝试了一些方法来尝试设置样式，仅对要使用JavaScript或CSS进行标记的标记之外的文本进行样式设置，并且仅在选中此复选框时才可以对其进行样式设置。并收到有关“无法设置未定义的属性'textDecoration'的错误。当我记录nextSibling的.style时，这就是未定义的结果，但是我可以从.nextSibling返回字符串。
这是我拥有的JavaScript，并且我的日志已检查=== true返回
“已检查”
“相关复选框后的文本”
紧接着第二个console.log之后的代码行引发了该错误。
对于else块，我的控制台返回
“！已检查”
下一行代码将引发相同的错误。
function main()
{
var checkBox = [];
var page;
page = document.getElementById("Content");
checkBox = page.childNodes;
for (i = 0, j = page.childNodes.length; i < j; i++)
{
if (checkBox[i].type == "checkbox")
{
if (checkBox[i].checked === true)
{
console.log("checked");
console.log(checkBox[i].nextSibling);
checkBox[i].nextSibling.style.textDecoration = "line-through";
}
else
{
console.log("!checked");
checkBox[i].nextSibling.style.textDecoration = "default";
};
};
};
}; //main()
我已经测试过.nextSibling.style，但它返回为undefined ...所以，我的问题是如何定义它，否则我将不得不遍历我的项目并将所有要设置样式的文本放入其中标签？如果是这样，是否有可能通过javascript自动执行此操作？
这是我为css解决方案所想出的，但是我不知道如何实际调用nextSibling，或者我什至可以。
input[type=checkbox]:checked + nextSibling
{
text-decoration: line-through;
}
最佳答案
您无法尝试设置样式，Text节点没有style属性：
您要做的是用一些东西包装文本，我将使用<span>：
<input type="checkbox">
<span class="text>Some Text Here</span>
在您的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';
}
}
如果您使用我的图书馆NodeList.js，则可以执行以下操作：
$$('input:checked').nextElementSibling.style.set('textDecoration', 'line-through');