document.write的输出被“隐藏”的问题。

来源:3-2 通过ID获取元素

桃太郎

2016-09-11 11:58

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>document.getElementById</title>

</head>

<body>

<p id="con"><span>这是p内部的一个子标签</span>JavaScript</p>

<script type="text/javascript">

  var mychar=document.getElementById("con")//获取元素存储在变量mychar中。

  var myword=mychar.innerHTML;//获取元素的内容存储在myword中,span会被当作字符串显示,但p不会。

  var myletter=mychar.innerText;//p、span都被当作标签不显示。

  document.write("结果:"+mychar+"<br/>"); //输出获取的P标签。

   mychar.style.color="red";

   mychar.style.backgroundColor="#CCC";

  document.write("结果:"+myword+"<br/>");//输出获取的P标签内容,因使用的是document.write所以p、span都被当作标签不显示。

   myword.style.color="blue";

   myword.style.backgroundColor="#CCC";

  document.write("结果:"+"&nbsp&nbsp"+myletter+"<br/>");//为了区分加了空格 

</script>

</body>

</html>

//当不存在第二段

   myword.style.color="blue";

   myword.style.backgroundColor="#CCC";

时,第三个document.write会显示,然而存在时,第三个document.write便没有输出内容。why?

写回答 关注

3回答

  • 鱼葱葱葱
    2016-09-11 12:53:55

    至于为什么加了myword.style.color="blue";   myword.style.backgroundColor="#CCC";之后没有显示后面的内容,是因为HTML文档的加载顺序是依次,加载完p标签以后开始读取js,读到myword.style.color="blue"; 这儿就报错了,所有后面的就不执行了。  具体可以F12看一下console报错,我用的是谷歌浏览器。  报错信息是     Uncaught TypeError: Cannot set property 'color' of undefined。

       (anonymous function)    @    9.html:25         并且会具体指出是哪个html文件的哪一行的错误,我在重新用sublime编辑器编辑的时候,就是在25行写的myword.style.color="blue";     。

    以上,拙见。也是自己的一个积累,一起努力。


    桃太郎

    结合大伙的观点,我觉得应该是:myword不包含p中的css设置属性.此时设置style,依次执行时,导致这里报错,后面的代码便不执行了。

    2016-09-11 15:02:30

    共 1 条回复 >

  • qq_cannonfodder_0
    2016-09-11 12:48:34

    style只能对元素对象操作

    桃太郎

    这个我知道,谢谢你

    2016-09-11 14:47:55

    共 1 条回复 >

  • 鱼葱葱葱
    2016-09-11 12:47:42

    mychar是你的p元素,而myword是你p元素的内容,内容是没有style属性的。myword.style.color="blue"; 你这儿应该是想给p元素更改style吧,。改成mychar。

    桃太郎

    给p元素更改style在第一段mychar.style已经实现了。我想问的是加了第二段 myword.style.color="blue"; myword.style.backgroundColor="#CCC";导致—— document.write("结果:"+"&nbsp&nbsp"+myletter+"<br/>");——没有显示出来。

    2016-09-11 14:47:11

    共 1 条回复 >

JavaScript入门篇

JavaScript做为一名Web工程师的必备技术,本教程让您快速入门

739817 学习 · 9566 问题

查看课程

相似问题