                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript入门篇

都说不能获取对象，为啥能添加上样式？

<!DOCTYPE HTML>

<html>

<head>

<title>document.getElementById</title>

</head>

<body>

<p id="con">JavaScript</p>

var mychar= document.getElementById("con") ;

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

mychar.style.color="red";

mychar.style.backgroundColor="#CCC";

mychar.style.width="300px";

mychar.style.height="50px";

</script>

<br/>

var mychar= document.getElementById("con").innerHTML ;

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

</script>

</body>

</html>

为什么

var mychar= document.getElementById("con") ;

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

不能获取p元素内容，然而;

mychar.style.color="red";

mychar.style.backgroundColor="#CCC";

mychar.style.width="300px";

mychar.style.height="50px";

却能给p元素添加样式，这是什么原因？？？？？

有礼彬

2016-09-01

源自：JavaScript入门篇 3-2

关注问题我要回答

1230

操作

收起

2 回答

请叫我MrX 回答被采纳 +3 积分
2016-09-01

var mychar=document.getElementById("con");确实获取了p标签元素这个对象，
mychar不仅仅只包含p的文本内容，还包含了p当中的className、css设置等等其他的属性
所以 document.write("结果："+mychar); 输出的并不是p的文本内容，而是[object HTMLParagraphElement]
如果要输出p的文本内容，应该写成：document.write("结果："+mychar.innerHTML);或者innerText也可以
为什么能够给p元素添加样式，也是因为mychar包含了p的css属性。总而言之：从面向对象的角度来说，一个对象
有很多的属性（成员变量）和行为（成员方法），通过 对象名+ . +具体的属性或者方法 编译器才会知道你要的
是什么。
个人经验浅谈，不足之处望各位及时指正。