函数内部没有获取p1、p2节点,为何能够设置class属性

来源:3-6 控制类名(className 属性)

深山小童

2016-03-20 23:16

<!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">

  function add(){

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

     p1.className = "one";

  }

  function modify(){

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

     p2.className = "two";

  }

</script>

</body>

</html>


写回答 关注

3回答

  • 司禄德
    2016-06-27 22:59:55
    已采纳

     p1.className = "one";


     p2.className = "two";


    这两句就可以获取class属性,因为本文将变量名和样式名写成一样的,所以很多人看着很绕,这里的p1和p2被认为是元素id了,所以才能设置元素,但实际上我们的认为是变量。建议你将变量给修改,就知道结果了

    深山小童

    p1、p2如果没定义,则相当于保存id名为p1、p2的对象的全局变量。即可以直接通过id名直接获取相关节点,但听说会存在兼容问题。

    2016-06-28 10:27:28

    共 2 条回复 >

  • 谢沛豪
    2016-03-27 11:19:51

    可能是缓存问题

    深山小童

    新的浏览器打开也是一样

    2016-04-10 19:02:08

    共 1 条回复 >

  • mystery楠
    2016-03-20 23:41:27

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

     var p2 = document.getElementById("p2");这两段语句是通过ID获取了P1和P2的元素,如何然后再去修饰元素。

    深山小童

    我将这两句话已经注释掉了

    2016-03-21 09:49:40

    共 1 条回复 >

JavaScript入门篇

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

739817 学习 · 9566 问题

查看课程

相似问题