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

ataehee · 发表于 2018-4-1 21:09:04

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

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

对着教材打代码，原书上是这样的：

codeoriginalinbook

把代码复制过来能正常显示并加粗两端的文字，可是当我自己用文本编辑器打的时候却出现fontWeight报错，如下图：
Screen Shot 2018-04-01 at 21.07.02.png

自己打的代码如下：

<html>
<head>
        <title> testing webpage </title>
</head>
<body>
<script>
function boldFirstAndLastNav()
{
        document.body.childNodes[1].firstChild.style.fontWeight = "bold";
        document.body.childNodes[1].lastChild.style.fontWeight = "bold";
}
</script>
<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>

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

<script>
boldFirstAndLastNav();
</script>
</body>
</html>

核对了几次没找出问题所在，求助有经验的各位小伙伴帮我看看~~谢谢~~

最佳答案

月排行榜 / 总排行榜

不二如是

2018-4-6 16:13:32

ataehee 发表于 2018-4-3 20:16
谢谢~你的代码可以正常跑~~
主要是我的代码主要是对着书打的~~只有文本部分做了修改，没写那么复杂，书 ...

跳转到最佳答案楼层

不二如是 · 发表于 2018-4-2 08:47:35

1、首先HTML DOM属性“fontWeight”没有用错。
w3c官方定义：

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

3、建议修改:

<!DOCTYPE html>
<html>
<head>
    <title> testing webpage </title>
</head>
<body>
<script>
    function boldFirstAndLastNav()
    {
        document.getElementsByTagName("nav")[0].firstChild.style.fontWeight="bold";
        document.getElementsByTagName("nav")[0].lastChild.style.fontWeight="bold";
    }
</script>
<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>
<p>This is a test website.</p>
<script>
    boldFirstAndLastNav();
</script>
</body>
</html>

4、涉及dom节点遍历，建议通过chrome最简单的"console.log()"进行排查，下面两段代码自行测试：

var b = document.getElementsByTagName("nav");
console.log(b);
var a = document.getElementsByTagName("nav")[0];
console.log(a);

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就是不太理解~~

不二如是 · 发表于 2018-4-6 16:13:32

ataehee 发表于 2018-4-3 20:16
谢谢~你的代码可以正常跑~~
主要是我的代码主要是对着书打的~~只有文本部分做了修改，没写那么复杂，书 ...

ataehee · 发表于 2018-4-14 09:39:19

不二如是发表于 2018-4-6 16:13

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

账号		自动登录	找回密码
密码			立即注册