如何使用nodes和.createElement(“b”）将文本加粗

How can I make text bold with nodes and .createElement("b")?

本文关键字：文本 nodes 何使用 createElement      更新时间：2023-09-26

如果我使用节点和createElement点击按钮，我必须将文本加粗，但我真的不知道如何。。。

html（这是我想加粗的文本）：

<p id="textalt">Dies ist ein Text in einem P-Tag</p>

javascript:

function fettmachen(){
var neuB = document.createElement("b");
document.getElementById("textneu").insertBefore(neuB,  document.getElementById("textneu").nextSibling);
}

我不知道它是怎么工作的。

"我必须使用节点并创建元素" 

function fettmachen(){
       // create the "b" element
    var neuB = document.createElement("b");
       // fetch the "textneu" element by ID
    var textneu = document.getElementById("textneu");
       // append the firstChild of "nextneu" to the "neuB"
    neuB.appendChild(textneu.firstChild);
       // append the "neuB" to the "nextneu"
    nextneu.appendChild(neuB);
}

我建议，不要添加新标签，只需使用CSS，并在元素中添加一个类。

CSS：

.boldText{
    font-weight: bold;
}

JavaScript:

function fettmachen(){
    document.getElementById("textalt").className += ' boldText';
}

我只是在按钮按下时的<p>标记上添加一个样式。也许是。。。

function fettmachen(){
var neuB = document.getElementById("textalt");
neuB.style.fontWeight = "bold";
}

好吧，您可以使用以下代码。它更长，可以浓缩——我个人觉得读起来更清晰。

function fettmachen()
{
    var pElem = document.getElementById('textAlt');
    var text = pElem.innerHTML;
    var bElem = document.createElement('b');
    bElem.innerHTML = text;
    pElem.innerHTML = '';
    pElem.appendChild(bElem);
}

这就是如何将文本加粗

function fettmachen(){
 var p = document.getElementById("textneu");
 p.style.fontWeight = "bold;"
}

例如，如果您出于某种原因让使用js，您可能只需要加粗某些单词，并且无法访问此处的样式表。否则，请使用Rocket的建议。

说真的，只有在某个时候你只需要加粗某些单词或元素中的单词组时，才可以使用这样的解决方案。

function fettmachen(){
    var neuB = document.createElement("b"),
        textEl = document.getElementById("textalt"),
        text = textEl.textContent;
    neuB.textContent = text;
    textEl.textContent = "";
    textEl.appendChild(neuB);
}

实时演示

以及取消粗体。

function unbold(){
    var textEl = document.getElementById("textalt"),
        boldEls = textEl.getElementsByTagName("b"),
        text = "";
    for(var i = 0; i < boldEls.length; i++){
        text+=boldEls[i].textContent;
        textEl.removeChild(boldEls[i]);
    }
    textEl.textContent = text;
}

实时演示2

相关文章：