JS-DOM

转载

mob604756e58279 2016-08-08 20:15:00

文章标签 html css 句柄 dom操作 css样式 文章分类 Html/CSS 前端开发

1、DOM操作HTML

1.1 通过查找id修改

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
   <p id="pid">hello</p>
   <button onclick="demo()">按钮</button>
   <script>
      function demo(){
          document.getElementById("pid").innerHTML("world");
      }
   </script>
</body>
</html>

1.2 修改属性（当点击按钮时，将 baidu 的链接修改为 jikexueyuan ）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
   <a id="aid" href="http://www.baidu.com">baidu</a>
   <button onclick="demo()">按钮</button>
   <script>
      function demo(){
          document.getElementById("aid").href="http://www.jikexueyuan.com";
      }
   </script>
</body>
</html>

2、DOM操作CSS (通过按钮来改变css样式的颜色)

index.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6    <link rel="stylesheet" href="style.css" type="text/css">
 7 </head>
 8 <body>
 9    <div id="div" class="div"></div>
10    <button onclick="demo()">按钮</button>
11    <script>
12       function demo(){
13           document.getElementById("div").style.background="blue";
14       }
15    </script>
16 </body>
17 </html>

css:

.div{
    width:100px;
    height:100px;
    background-color: red;
}

3、DOM EventListener

JS-DOM_句柄

3.1 addEventListener'

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6    <link rel="stylesheet" href="style.css" type="text/css">
 7 </head>
 8 <body>
 9    <button id="btn">按钮</button>
10    <script>
11       document.getElementById("btn").addEventListener("click", function(){alert("hello world")});
12    </script>
13 </body>
14 </html>

3.2 多重句柄：（连续弹出连个对话框“hello”、“world”）

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6    <link rel="stylesheet" href="style.css" type="text/css">
 7 </head>
 8 <body>
 9    <button id="btn">按钮</button>
10    <script>
11       var x = document.getElementById("btn");
12       x.addEventListener("click",hello);//句柄
13       x.addEventListener("click",world);
14       
15       function hello(){
16           alert("hello");
17       }
18       function world(){
19           alert("world");
20       }
21      
22    </script>
23 </body>
24 </html>