为啥将斜体变为粗体就不行?

来源:9-15 替换元素节点replaceChild()

qq_愁怅_03698152

2016-09-25 14:42

http://img.mukewang.com/57e77199000144d104800486.jpg

求诸位大神详解


写回答 关注

4回答

  • QuincyHan
    2016-09-30 09:52:36
    已采纳

    replaceChild(newnode,oldnode)每次使用的时候,所有与之相关的属性内容被清空,也就是说你第一次替换之后,那个位置的id属性已经清空了,变成了<i>JavaScript</i>,你已经无法通过oldnode=document.getElementById("oldnode")获取节点了,所以每次替换着以后你要给替换上的节点添加id属性,具体如下面代码

    --------------------------------------------------------------

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>childNodes</title>

    </head>

    <body>

    <script type="text/javascript">

    function replaceMessage(){

    var change=document.getElementById("change");

    var oldnode=document.getElementById("oldnode");

    if (oldnode.nodeName=="B"){

    var newnode=document.createElement("i");

    newnode.innerHTML=oldnode.innerHTML;

    oldnode.parentNode.replaceChild(newnode,oldnode);

    oldnode=null;

    newnode.setAttribute("id","oldnode");

    change.innerHTML="斜体改粗体";

    }

    else {

    var newnode=document.createElement("b");

    newnode.innerHTML=oldnode.innerHTML;

    oldnode.parentNode.replaceChild(newnode,oldnode);

    oldnode=null;

    newnode.setAttribute("id","oldnode");

    change.innerHTML="粗体改斜体";

    }

    }

    </script>

    <b id="oldnode">Java</b><br>

    <a href="javascript:replaceMessage()" id="change">粗体改斜体</a>

    </body>

    </html>


    qq_愁怅_...

    非常感谢!

    2016-10-06 18:16:16

    共 1 条回复 >

  • qq_愁怅_03698152
    2016-09-26 13:31:58

    http://img.mukewang.com/57e8b2a800013a9404690502.jpg

    改成这样还是不行 该咋办了?


  • 慕仙6873019
    2016-09-26 10:53:47

    没有将新创建的元素重新设置ID,应该在createElemrnt之后给新标签添加id:newnode.setAttribute("id", "oldnode");

    qq_愁怅_...

    怎么添加,我不会可以说的再详细点吗? 拜托了

    2016-09-26 12:13:09

    共 1 条回复 >

  • 叶子_2016
    2016-09-26 10:43:22

    大小写B有问题吧

    qq_愁怅_...

    我试过小写的 但是不行 直接 粗变斜都不行 不过 也谢谢你了

    2016-09-26 12:14:24

    共 1 条回复 >

JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

468195 学习 · 21891 问题

查看课程

相似问题