如何修改.innerhtml文本



,所以这就是我的身体标签中所拥有的:

<div class="my-block">
    <p id="demo">
    <font size="5">Old text<br><br>
    <b><text onClick="myFunction()">Click here to continue!</text></b></p> 
    <script>
        function myFunction() {
        document.getElementById("demo").innerHTML = "New text"; 
    }
    </script>
    </font>
</div>

可以像我想要的那样替换文本的工作,但是格式化(如文本大小)会更改为.innerhtml中的默认值,我似乎无法弄清楚如何将其恢复。我可以使它大胆,小等,但是我想像其他大小一样将大小更改为5。我试图用"新文本"将字体的脸标签放入报价(和引号之外)中:

document.getElementById("demo").innerHTML = "<font size="5"> New text </font>";

,但是即使与大胆和小"起来。

目前忽略无效的标记,您的引号是错误的(在双引号字符串中的双重报价)。尝试

document.getElementById("demo").innerHTML = '<font size="5">New text</font>';

另外,只需定位<font>标签

document.querySelector('#demo > font').innerHTML = "New Text";

只需在段落中使用CSS样式即可。"字体大小"可以完成工作。

<div class="my-block">
<p id="demo" style="font-size:25px";>
Old text<br><br>
<b><text onClick="myFunction()">Click here to continue!</text></b></p> 
<script>
    function myFunction() {
    document.getElementById("demo").innerHTML = "New text"; 
}
</script>
</div>

这是您的代码:

<div class="my-block">
    <p id="demo">
        <font size="5">Old text<br><br>
        <b><text onClick="myFunction()">Click here to continue!</text></b></p> 
        <script>
            function myFunction() {
            document.getElementById("demo").innerHTML = "New text"; 
        }
        </script>
        </font>
    </div>

这应该是:

<div class="my-block">
    <p id="demo">
    <font size="5">Old text<br><br>
    <b><text onClick="myFunction()">Click here to continue!</text></b>
    <script>
        function myFunction() {
        document.getElementById("demo").innerHTML = "New text"; 
        // or u can do this too :
        document.getElementById("demo").innerHTML = "<font size="5"> New text </font>";
    }
    </script>
    </font>
    </p> 
</div>

查看<p></p>标签
但是仅出于您的信息,html5

中不支持<font></font>标签

检查您的报价。如果不逃脱它们,就不能拥有"内部"",但是您可以拥有"内部"。

也已弃用"字体"标签
document.getElementById("demo").innerHTML = '<span style="font-weight: bold; font-size: 25px"> New text </font>';

最新更新