Question

我在格式化基本的javascript输出时遇到了麻烦。现在它以通用时间字体输出，我想将其改为类似calibri的东西。

示例：

var x = document.getElementById("textbox1").value;
document.print("<p style='font-family:calibri'>x</p>");

我知道这不起作用，因为它将它视为字符串文字，只输出一个校准字体的x。那么如何才能输出变量x并保持字体格式？

必须留在javascript和html中，可以使用CSS，但对它一点都不熟悉。

Answer 1

它被视为字符串文字的原因是因为它是一个。

var x = document.getElementById("textbox1").value;
document.print("<p style='font-family:calibri'>x</p>");

如果您希望显示#textbox的值，则需要：

var x = document.getElementById("textbox1").value;
document.print("<p style='font-family:calibri'>"+x+"</p>");

基本上，它将三个字符串绑在一起，因为+是一个不仅会计算

的运算符

alert(1 + 1)

哪个会以整数2

出现

但也

'Hi.'+" I'm Jeff."

这将是字符串“嗨。我是杰夫。”

Answer 2

您根本不需要使用字符串连接来实现此目的，因为您希望将元素的文本内容设置为您已获得的 String

在样式表中（即<style>和</style>之间），

.some_awesome_description {
    font-family: calibri;
}

此处令牌之前的.指定“在类属性中查找此内容”

在 JavaScript 中，

// get your String
var x = document.getElementById("textbox1").value;

// create a new element
var my_awesome_element = document.createElement('span');

// set it's text as the String
my_awesome_element.textContent = x;

// set it's class to be matched by the CSS
my_awesome_element.setAttribute('class', 'some_awesome_description');

// append it to the DOM tree where you want it
document.body.appendChild(my_awesome_element);

我们使用的东西

方法 document.createElement创建新元素
property node.textContent设置元素的文本
方法 element.setAttribute在元素上创建属性
方法 node.appendChild将元素添加到DOM树
document.body，引用 HTML #document

<body>

<span>，一个通用的内联容器元素

Answer 3

使用x和concatenate（<p>）将+与字符串分开：

var x = document.getElementById("textbox1").value;
document.write("<p style='font-family:calibri'>" + x + "</p>");

在javascript输出中设置字体样式

3 个答案: