课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

如果要将斜体改为粗体

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

Mr丶Jia

2017-01-08 11:27

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

</head>

<body>



  <div><b id="oldnode">JavaScript</b>是一个很常用的技术，为网页添加动态效果。</div>

  <a href="javascript:replaceMessage()"> 将加粗改为斜体</a>

  <a href="javascript:bag()">将斜体改为粗体</a>

    <script type="text/javascript">

    var oldNode,newNode,a,c

      function replaceMessage(){

          newNode=document.createElement("i");

   newnodeText=document.createTextNode("javascript");

           newNode.appendChild(newnodeText);

            oldNode=document.getElementById("oldnode");

           oldNode.parentNode.replaceChild(newNode,oldNode);

       } 

       function bag(){

           a=document.createElement("b");

             c=document.getElementById("newNode");

           a.innerHTML=c.innerHTML;

          c.parentNode.replaceChild(a,c);

       }

  </script>

  

 </body>

</html>

我想将斜体再改回粗体，请大神看看哪里不对呢，为什么不行

写回答 关注

6回答

  • 帅弟弟
    2017-02-08 08:31:56

    报错：Uncaught TypeError: Cannot read property 'innerHTML' of null。


    第二个函数改成

           function bag(){

               a=document.createElement("b");

               o=document.getElementsByTagName('div');

               c=o[0].childNodes[0];

               a.innerHTML=c.innerHTML;

              c.parentNode.replaceChild(a,c);

           }

    就可以了。但是你要再转换回去，又有bug。就是第一个函数的

    0 0
  • 慕村1994845
    2017-02-04 22:47:12

    其实也可以先设置id，两种方法，你自己看下都行：

    <script type="text/javascript">
    var oldNode,newNode,a,c
      function replaceMessage(){
          newNode=document.createElement("i");
          newnodeText=document.createTextNode("javascript");
           newNode.appendChild(newnodeText);
           var newid=newNode.setAttribute("id","newNode");
           //这里如果没有设置"i"的新id，那么下面函数中的c可以直接设置索引TagName来完成效果
            oldNode=document.getElementById("oldnode");
           oldNode.parentNode.replaceChild(newNode,oldNode);
       } 
       function bag(){
           a=document.createElement("b");
             c=document.getElementById("newNode");
             //c=document.getElementsByTagName("i")[0]
             //这里用TagName要索引下，不然得到的是一个数组
           a.innerHTML=c.innerHTML;
          c.parentNode.replaceChild(a,c);
       }
  </script>


    0 0
  • 慕村1994845
    2017-02-04 22:03:47

    你在本地编辑器里写好代码，在浏览器中查看效果时，可以F12经行调试，可以找到问题所在，可以帮自己更好的改进

    0 0
  • 慕村1994845
    2017-02-04 22:01:35

    http://img.mukewang.com/5895ddbb00015fb114250739.jpg

    看图，当你改变"b"为"i"之后，并没有设置id为多少，是吧？看划线地方

    那么你去找寻id="newNode"就是找不到的啦！

    下面是把你代码改了下，就可以实现你想要的效果了：

    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>


  <div><b id="oldnode">JavaScript</b>是一个很常用的技术，为网页添加动态效果。</div>
  <a href="javascript:replaceMessage()"> 将加粗改为斜体</a>
  <a href="javascript:bag()">将斜体改为粗体</a>
    <script type="text/javascript">
    var oldNode,newNode,a,c
      function replaceMessage(){
          newNode=document.createElement("i");
          newnodeText=document.createTextNode("javascript");
           newNode.appendChild(newnodeText);
            oldNode=document.getElementById("oldnode");
           oldNode.parentNode.replaceChild(newNode,oldNode);
       } 
       function bag(){
           a=document.createElement("b");
             c=document.getElementsByTagName("i")[0];
             //这里用TagName要索引下，不然得到的是一个数组
           a.innerHTML=c.innerHTML;
          c.parentNode.replaceChild(a,c);
       }
  </script>
  
 </body>
</html>


    0 0
  • 慕粉4390729
    2017-01-09 23:14:57

    是不是成员变量和局部变量的区别？

    4 0

    Mr丶Jia 回复慕粉4390...

    谢谢。

    2017-01-10 20:11:43

    共 4 条回复 >

  • 慕粉4390729
    2017-01-08 21:41:57

    c=document.getElementById("newNode"); // 这个newnode怎么会出现？

    1 0

    Mr丶Jia

    在粗体改为斜体之后，id=oldnode不就被newNode替换了吗

    2017-01-09 10:23:43

    共 1 条回复 >

JavaScript进阶篇

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

468195 学习 · 21891 问题

查看课程

相似问题

将粗体改为斜体？

回答 2

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

回答 4

粗体变斜体求解

回答 3

为什么会粗体变斜体呢

回答 2

为什么这串代码点击“将粗体改为斜体”不出现内容？

回答 3

打开慕课网App查看更多内容