                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

如果要将斜体改为粗体

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

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

Mr丶Jia

2017-01-08

源自：JavaScript进阶篇 9-15

关注问题我要回答

1118

操作

收起

6 回答

帅弟弟
2017-02-08

报错：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

其实也可以先设置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 回复有任何疑惑可以回复我~

慕村1994845
2017-02-04

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

0 回复有任何疑惑可以回复我~

慕村1994845
2017-02-04

看图，当你改变"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 回复有任何疑惑可以回复我~

慕粉4390729
2017-01-09

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

0 回复有任何疑惑可以回复我~

#1

Mr丶Jia 提问者

怎么改才能实现呢

2017-01-10 回复有任何疑惑可以回复我~

#2

慕粉4390729 回复 Mr丶Jia 提问者

我也是初学者，刚看完一遍根本就记不住这么多方法的应用，解答不了，不好意思

2017-01-10 回复有任何疑惑可以回复我~

#3

Mr丶Jia 提问者回复慕粉4390729

没关系的

2017-01-10 回复有任何疑惑可以回复我~

查看1条回复

慕粉4390729
2017-01-08

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

0 回复有任何疑惑可以回复我~

#1

Mr丶Jia 提问者

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

2017-01-09 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

JavaScript进阶篇

参与学习 468189 人
解答问题 21891 个

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

本课相似问答

2 回答将粗体改为斜体？

4 回答为啥将斜体变为粗体就不行？

3 回答粗体变斜体求解

2 回答为什么会粗体变斜体呢

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

搜索更多本课相关问答

如果要将斜体改为粗体

我要回答关注问题

意见反馈帮助中心 APP下载