QQ登录

只需一步,快速开始

登录 | 立即注册 | 找回密码

主题

帖子

荣誉

新鱼友

Rank: 1

积分
33
查看: 165|回复: 4

[已解决]JS中fontWeight奇怪报错~求助~

[复制链接]
最佳答案
0 
累计签到:3 天
连续签到:1 天
ataehee 发表于 2018-4-1 21:09:04 1654 | 显示全部楼层 |阅读模式

马上注册加入鱼C,享用更多服务吧^_^

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
本帖最后由 ataehee 于 2018-4-1 21:46 编辑

对着教材打代码,原书上是这样的:

codeoriginalinbook

codeoriginalinbook

把代码复制过来能正常显示并加粗两端的文字,可是当我自己用文本编辑器打的时候却出现fontWeight报错,如下图:
Screen Shot 2018-04-01 at 21.07.02.png
自己打的代码如下:
  1. <html>
  2. <head>
  3.         <title> testing webpage </title>
  4. </head>
  5. <body>
  6. <script>
  7. function boldFirstAndLastNav()
  8. {
  9.         document.body.childNodes[1].firstChild.style.fontWeight = "bold";
  10.         document.body.childNodes[1].lastChild.style.fontWeight = "bold";
  11. }
  12. </script>
  13. <nav><a href="home.html">Home</a> | <a href="why.html">Why?</a> | <a href = "what.html">What?</a> | <a href="contactus.html">Contact us</a></nav>

  14. <p>This is a test website.</p>

  15. <script>
  16. boldFirstAndLastNav();
  17. </script>
  18. </body>
  19. </html>
复制代码


核对了几次没找出问题所在,求助有经验的各位小伙伴帮我看看~~谢谢~~
最佳答案
2018-4-6 16:13:32
ataehee 发表于 2018-4-3 20:16
谢谢~你的代码可以正常跑~~
主要是我的代码主要是对着书打的~~只有文本部分做了修改,没写那么复杂,书 ...

Snip20180406_62.png
楼层
跳转到指定楼层
最佳答案
120 
累计签到:632 天
连续签到:160 天
不二如是 发表于 2018-4-2 08:47:35 | 显示全部楼层
1、首先HTML DOM属性“fontWeight”没有用错。
w3c官方定义:
Snip20180402_23.png


2、未定义的fontWeight属性,是因为“body.childNodes[1].firstChild”找错子节点:
Snip20180402_24.png


3、建议修改:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title> testing webpage </title>
  5. </head>
  6. <body>
  7. <script>
  8.     function boldFirstAndLastNav()
  9.     {
  10.         document.getElementsByTagName("nav")[0].firstChild.style.fontWeight="bold";
  11.         document.getElementsByTagName("nav")[0].lastChild.style.fontWeight="bold";
  12.     }
  13. </script>
  14. <nav><a href="http://bbs.fishc.com">Home</a> | <a href="http://bbs.fishc.com">Why?</a> | <a href = "http://bbs.fishc.com">What?</a></nav>
  15. <p>This is a test website.</p>
  16. <script>
  17.     boldFirstAndLastNav();
  18. </script>
  19. </body>
  20. </html>
复制代码


4、涉及dom节点遍历,建议通过chrome最简单的"console.log()"进行排查,下面两段代码自行测试:
  1. var b = document.getElementsByTagName("nav");
  2. console.log(b);
  3. var a = document.getElementsByTagName("nav")[0];
  4. console.log(a);
复制代码


最佳答案
0 
累计签到:3 天
连续签到:1 天
ataehee  楼主| 发表于 2018-4-3 20:16:19 | 显示全部楼层
不二如是 发表于 2018-4-2 08:47
1、首先HTML DOM属性“fontWeight”没有用错。
w3c官方定义:

谢谢~你的代码可以正常跑~~
主要是我的代码主要是对着书打的~~只有文本部分做了修改,没写那么复杂,书里面的代码直接复制过来可以正常显示不报错,我的代码就报错~
如图:
Screen Shot 2018-04-03 at 20.13.35.png

不过确实刚学,对DOM就是不太理解~~
最佳答案
120 
累计签到:632 天
连续签到:160 天
不二如是 发表于 2018-4-6 16:13:32 | 显示全部楼层    本楼为最佳答案   
ataehee 发表于 2018-4-3 20:16
谢谢~你的代码可以正常跑~~
主要是我的代码主要是对着书打的~~只有文本部分做了修改,没写那么复杂,书 ...

Snip20180406_62.png
最佳答案
0 
累计签到:3 天
连续签到:1 天
ataehee  楼主| 发表于 2018-4-14 09:39:19 | 显示全部楼层

是的 谢谢你的解答~  后来一直在学DOM 对这个理解深一些了  确实之前这个代码结构有点混乱 代码部分应该放在<head></head>之间结构会清晰一些~

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

小甲鱼强烈推荐 上一条 /1 下一条

    移动客户端下载(未启用)
    微信公众号

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备11014136号

Copyright 2018 鱼C论坛 版权所有 All Rights Reserved.

Powered by Discuz! X3.1 Copyright
© 2001-2018 Comsenz Inc.    All Rights Reserved.

小黑屋|手机版|Archiver|鱼C工作室 ( 粤公网安备 44051102000370号 | 粤ICP备11014136号

GMT+8, 2018-4-27 16:37

快速回复 返回顶部 返回列表