javascript - 如何将 css 规则应用于 Javascript 表达式？

Question

$("#confirm_text").text("Are you sure you want " +this.name +" "+ this.type +"?");

整个短语是白色的，但我想让this.name和this.type 变成橙色。JS 方法fontcolor不起作用。有什么办法可以做到这一点？

score 2 · Accepted Answer

尝试这个：

"Are you sure you want <span style='color: orange'>" +this.name +" "+ this.type +"</span> ?"

在这里你可以看到演示：http: //jsfiddle.net/2pRzX/

score 1 · Accepted Answer

我通常 this.name  用于这种情况。
在 CSS 中.orange{color:orange;}

score 1 · Accepted Answer

您必须将文本放入某种 HTML 元素中，例如. 您可以使用innerHTML更简单的方法来完成它，或者通过一个一个地创建元素来完成。

使用 jQuery（更新答案）

随着问题的更新，我更新了答案以适应新问题。

代替.text，您可以使用.html类似的方法element.innerHTML =（请参阅下面的旧答案）。它解析 HTML 代码并将其插入到元素中。请注意，您应该将字符串括在单引号中，以便您可以使用双引号而不转义它们。

$("#confirm_text").html('Are you sure you want <span style="color:orange">' + this.name + ' ' + this.type + '?');

使用纯 JavaScript（旧答案）

这个答案已经过时了，因为问题已经改变并且需要 jQuery 而不是普通的 JS。我把这个留在这里供以后参考。

内部HTML

当您将 HTML 代码添加到 DOM 中的现有元素时，浏览器将解析字符串并创建新元素。您可以在字符串中包含标签，浏览器将创建一个元素。

var targetDIV = document.getElementById("targetDIV");
// Add the text with innerHTML
targetDIV.innerHTML = 'Are you sure you want <span style="color:orange;">' + this.name + ' ' + this.type + '</span>?';

创建元素

有时您不能只使用 innerHTML，尤其是在目标元素中已经存在文本的情况下。这是另一种选择：

var targetDIV = document.getElementById("targetDIV");

// Append the first peace of text
targetDIV.appendChild(document.createTextNode("Are you sure you want "));

// Create the span element
var orange = document.createElement("span");
// Change its text-color
orange.style.color = "orange";
// Add the text to the span
orange.appendChild(document.createTextNode(this.name + " " + this.type));
// Append the span to the target element
targetDIV.appendChild(orange);

// Append the question mark
targetDIV.appendChild("?");

使用哪个？

在大多数情况下，您可以使用其中任何一种方法。不过，我总是使用第二个，因为我觉得它是“更干净”的那个。您可以更好地控制发生的事情，您可以通过添加/删除/更改行来更改内容，而不是修改大字符串。您也不必检查您的 HTML 是否有效。但正如我所说，这两种方法都有效。

score 1 · Accepted Answer

这可能有效。

"Are you sure you want " +<span class="orange">this.name</span> +" "+ <span class="orange">this.type</span> +"?"

并应用 css：

.orange{
    color:orange;
}

score 0 · Accepted Answer

您可以 在名称和类型值周围添加标签，并使用 CSS 添加颜色。示例：http: //jsfiddle.net/BAhUG/

score 0 · Accepted Answer