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

Question

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

整个短语是白色的，但我想要 this.name 和 this.type 橙色。 JS方法 fontcolor 不起作用。有什么办法吗？

Answer 1

试试这个：

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

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

Answer 2

这可能有用。

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

并申请css：

.orange{
    color:orange;
}

Answer 3

我通常在这种情况下使用< span class="orange"> this.name < /span>。
在css .orange{color:orange;}

中

Answer 4

您必须将文本放在某种HTML元素中，例如<span>。要么使用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。我把它留在这里供以后参考。

的innerHTML

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

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("?");

使用哪种？

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

Answer 5

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

Answer 6

试试这个：

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