如何通过DOM将CSS应用于某些文本？（没有库，只有Javascript）

我们目前正在学习如何使用DOM和一些javascript命令来创建动态网站。到目前为止，我的主要也是唯一的问题是，我的CSS不会应用于我添加到带有

id=“paration”

标记的

中的HTML：

1.我做错了什么

2.我可以做什么不同的事情

3.什么可以帮助清理我的代码

function Music() {
var string = document.getElementById('text').value.match( /[^\.!\?]+
[\.!\?]+/g ); // This searches through our text, puts results into an 
array
    for (var i = 0; i < string.length; i++) { // This goes through our "string array"
        var space = string[i].match(/\s/g ); // Counts the amount of 
spaces in each string.
        var wrapEl = document.createElement("span"); // Create a span tag
        wrapEl.innerHTML = string[i]; // place strings into span tag
// This clears the paragraph element and refills it with the new text output.
        if (string.length > 0) {
        document.getElementById("paragraph").innerHTML = "You didn't 

函数音乐（）{
var string=document.getElementById（'text'）.value.match（/[^\.！\？]+
[\.！\？]+/g）；//这将搜索我们的文本，将结果放入
大堆
对于（var i=0；i0）{
document.getElementById（“段落”）.innerHTML=“您没有

写任何东西！”

}其他{
log（“你什么都没写！”；
}    
开关（空间长度）{
case space您当前正在尝试使用
.addClass（）
向DOM元素添加一个类。这实际上是一个jQuery方法，而不是普通的JavaScript。我建议您使用添加类

注意：
类列表
在Internet Explorer 9及以下版本中不受支持。如果您需要支持旧版本的IE，请按照中的说明使用
className+=“style1”

您还有一些
span.addClass（“style1”）
的实例。从您问题中发布的代码来看，没有
span
变量。这应该是
wrapEl

应采取以下措施：


var wrapEl=document.querySelector（'span'）；
wrapEl.classList.add（'style1'）
.style1{
颜色：红色
}
这不受影响。应为黑色

这已经应用了.style1。应该是红色的
在您定义它之前，您正在尝试将类添加到
wrapEl
。您正在尝试将类添加到
span
，而您从未定义过。哦，好的，我现在看到了，所以我更改了它（我将在稍后更新我的代码）但是仍然没有一个CSS应用。我将继续处理它。因此，我现在在控制台中没有收到任何错误，但是我的文本不会显示。我想使用appendChild并将项目放置在由我的var“string”创建的数组中进入我创建的span标记，然后进入段落元素，供用户查看。这行吗？如果你愿意，我有几分钟的时间调试你的脚本。这样我们就不会充斥评论了。那太好了，我希望may count是合格的，尽管是R.I.P。我的帐户代表不>=20。哦，好吧。如果你可以在发布当前代码，或者我们可以一看。
        } else {
        console.log("You Didn't write anything!");
        }    
        switch (space.length) {
            case space <=2: //Tiny (0-2 words) - Yellow Highlight
                span.addClass("style1");
                break;
            case space <=5: //Short (3-5 words) - Red Highlight
                span.addClass("style2");
                break; 
            case space <=14: //Medium (6-14 words) - Green Highlight
                wrapEl.addClass("style3");
                break;
            case space >15: //Long (15+ words) - Blue Highlight
                wrapEl.addClass("style4");
                break;}

        var paragraph = document.getElementById("paragraph"); 
        paragraph.appendChild(wrapEl); // append span tag to paragraph tag via id
    }
}