时间戳

首页 > 解决方案 > 生成带有部分样式的文本？

javascript - 生成带有部分样式的文本？

问题描述

我正在尝试动态创建一个带有粗体和斜体部分的段落，但无法使用文本节点创建它。尝试将文本节点附加到文本区域，\n 工作正常，但没有粗体或斜体，并且该区域的样式对我来说是另一个令人头疼的问题。

使用下面的代码，尝试附加到 'p' 元素，但现在 \n 也不起作用。为初学者创建诸如“ Decision: ”之类的样式文本作为代码底部生成字符串的一部分的简单方法是什么？

还尝试使用干净且可回收的代码，但这对我来说可能是一种奢侈。提前致谢。

<script>

    function addBreak () {
        document.body.appendChild(document.createElement("br"));
    }

    function createlabel(label) {
        addBreak()
        var title = document.body.appendChild(document.createElement("b"));
        title.innerHTML = "sdsd";
        addBreak()
    }

    function appendField(textField,text) {
        textField.appendChild(text);
        document.body.appendChild(textField);
        addBreak()
    }

    function createField(label,text) {
        createlabel(label)
        var textField = document.createElement("p");
        var text = document.createTextNode(text);
        appendField(textField,text)
    }

    function report (dataName1,dataName2,p,a) {
        var label = "1 - Names of the variables";
        label.bold();
        var text = dataName1 + \n + dataName2;
        createField(label,text);

        label = "2 - Formulate the hypotheses";
        var h0 = "There is no significant correlation between " + dataName1 + " and " + dataName2 + " (ρ = 0).";
        var h1 = "There is a significant correlation between " + dataName1 + " and " + dataName2 + "(ρ ≠ 0).";
        var decision
        var isP
        var isH
        if (p<a){
            decision = "Reject";
            isP = "p<a";
            isH = h0;
        }
        else{
            decision = "Fail to reject";
            isP = "p>a";
            isH = h1;
        }
        text = "H0:" + h0 + \n +
               "H1:"+ h1 + \n +
               "Decision: " + decision + " since " + isP + " ." +  isH;
        createField(label,text);
        
    }
</script>

标签： javascript

解决方案

首先，我建议使用模板字符串，它可以让您编写更具可读性的代码。

你可以用这个语法来做到这一点

let text = `H0: ${h0} \n
            H1: ${h1} `

正如你所看到的，你可以用它来做新的行，你可以用这个语法 ${} 把你的变量放在字符串中。然后不再需要用+连接你的字符串

例如，要对元素进行样式设置，您可以围绕粗体元素进行跨度，然后在您的 css 文件中对其进行样式设置

let text = `H0: ${h0} \n 
            H1: ${h1} \n
            Decision: <span class="bol">decision<span>`

然后在你的 CSS

.bol{
     font-weight: bold;
 }

推荐阅读