Question

如果我点击使用节点和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);
}

我不知道它是如何运作的。

Answer 1

“我必须使用nodes和createElement”

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);
}

Answer 2

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

CSS：

.boldText{
    font-weight: bold;
}

JavaScript的：

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

Answer 3

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

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

Answer 4

好吧，您可以使用以下代码。它更长，可以浓缩 - 我觉得个人阅读更清楚。

function fettmachen()
{
    var pElem = document.getElementById('textAlt');
    var text = pElem.innerHTML;

    var bElem = document.createElement('b');
    bElem.innerHTML = text;

    pElem.innerHTML = '';
    pElem.appendChild(bElem);
}

Answer 5

这是如何使文字粗体

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

Answer 6

如果因某种原因而使用js，例如你可能只需要加粗某些单词，并且无法访问样式表。否则使用Rocket建议的内容。

严重的是只使用这样的解决方案，如果在某些时候你只需要在元素中加粗某些单词或单词组。

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

    neuB.textContent = text;
    textEl.textContent = "";
    textEl.appendChild(neuB);
}

<强> Live Demo

并解开。

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;
}

<强> Live Demo 2

如何使用节点和.createElement（“b”）使文本变为粗体？

6 个答案: