如果要将斜体改为粗体

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

如果要将斜体改为粗体

<!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>

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

提问者：Mr丶Jia 2017-01-08 11:27

个回答

帅弟弟

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

慕村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>

慕村1994845

2017-02-04 22:03:47

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

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>

慕粉4390729

2017-01-09 23:14:57

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

0
慕粉4390729

2017-01-08 21:41:57

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

0