如果要将斜体改为粗体-慕课网

首页课程实战体系课手记专栏慕课教程

如果要将斜体改为粗体

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

Mr丶Jia

2017-01-08 11:27

<!DOCTYPE HTML>

<html>

<head>

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

</head>

<body>

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

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

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

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

看图，当你改变"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代码开始，带您进入网页动态交互世界

468061 学习 · 21891 问题

查看课程

相似问题

将粗体改为斜体？

回答 2

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

回答 4

粗体变斜体求解

回答 3

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

回答 3

为什么会粗体变斜体呢

回答 2

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