为了账号安全,请及时绑定邮箱和手机立即绑定

请教一下大神!

<!DOCTYPE HTML>

<html>

<head>

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

<title>className属性</title>

<style>

    body{ font-size:16px;}

    .one{

border:1px solid #eee;

width:230px;

height:50px;

background:#ccc;

color:red;

    }

.two{

border:1px solid #ccc;

width:230px;

height:50px;

background:#9CF;

color:blue;

}

</style>

</head>

<body>

    <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>

    <input type="button" value="添加样式" onclick="add()"/>

<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>

    <input type="button" value="更改外观" onclick="modify()"/>


<script type="text/javascript">

    document.write("<br />"+"p2的值为:"+p2.classNmae)

  function add(){

     var p1 = document.getElementById("p1");

    p1.className="one";

  }

  function modify(){

     var p2 = document.getElementById("p2");

     p2.className="two";

           }

       

</script>

</body>

</html>

请问为什么它是显示(p2的值为:undefined)  而不是显示p2具体的className值呢?请问哪里写错了吗?

正在回答

3 回答

大婶告诉你,你这个写法是错误的,本来应该报错的,但是你歪打正着,输出了undefined。。

大婶为啥要这样说的?

因为p2是一个id,然后在某些浏览器下(比如chrome)有中快捷写法,就是可以直接用id值来代表dom元素。。

所以,   p2.className

相当于   var p2 = document.getElementById('p2');

            p2.className

看明白了吧?就是一种简写。不支持这种写法的浏览器会报错。。

假设你知道这种简写,你是故意这样写的,那么我接着往下说为什么是undefined,

因为代码执行到 document.write("<br />"+"p 2 的 值 为:"+p2.classNmae) 这句的时候,p2根本没有className属性啊!!!所以不是undefined才怪嘞。。

虽然你写了一个add方法来添加className属性,但是这时候这个add方法还没执行。。

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

你写错了  p2.className  你写成了p2.classNmae

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

谢啦~ 我还想请教一下大婶我这个写法是错误的是简写可能有些浏览器不支持,那正确的写法是怎么样的呢?

再次感谢!

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

慕男婶

var p2 = document.getElementById('p2'); p2.className
2015-12-12 回复 有任何疑惑可以回复我~
#2

Scny 提问者 回复 慕男婶

原来如此 先要声明变量是吧 感谢啦
2015-12-12 回复 有任何疑惑可以回复我~
#3

慕男婶 回复 Scny 提问者

是的。
2015-12-12 回复 有任何疑惑可以回复我~
#4

Scny 提问者 回复 慕男婶

嗯嗯~
2015-12-12 回复 有任何疑惑可以回复我~
查看1条回复

举报

0/150
提交
取消
JavaScript入门篇
  • 参与学习       739958    人
  • 解答问题       9566    个

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

进入课程

请教一下大神!

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信