java web 30 : DOM

电灯开关案例：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"/>
 5 <title>电灯开关案例</title>
 6 <style>
 7     body{padding:20px;font-size:20px;}
 8     #div1{width:30%;border:1px solid red;padding:5px;margin-bottom:20px;}
 9 </style>
10 <!-- 引入jquery的js库
11 <script src="js/jquery-1.8.3.min.js"></script> -->
12 <script>
13     var flag="off"
14     function changeImg(){
15         var img1 = document.getElementById("img1");
16         if(flag=="off")
17         {    
18             img1.src = "imgs/on.gif";
19             flag = "on";
20         }
21         else
22         {
23             img1.src = "imgs/off.gif";
24             flag = "off";
25         }
26         return;
27     }
28 </script>
29 </head>
30 <body>
31     
32     <img id="img1" src="imgs/off.gif"/>
33     <br/><br/>
34     <input type="button" value="开/关灯"
35         onclick="changeImg()" /> <br/><br/>
36     
37 </body>
38 </html>

**********************************************************************************

元素的dom操作案例：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"/>
 5 <title>元素的增删改查</title>
 6 <!-- 加入样式表 -->
 7 <style type="text/css">
 8     div { border:#0099FF 2px solid;height:60px;width:350px;margin:20px 10px;padding:5px 7px;line-height:60px;font-size:26px;text-align:center;}
 9     #div_1{ background-color:#d400ff; }
10     #div_2{ background-color:#FF3399; }
11     #div_3{ background-color:#00FF00; }
12     #div_4{ background-color:#FFFF66; }
13     #info{ width:250px;height:90px;font-size:22px;padding:5px;resize:none;}
14     input{font-size:18px;}
15 </style>
16 
17 <script type="text/javascript">
18     /** 练习1、添加元素:添加一个div元素到body中 */
19     function addNode(){
20         var newDiv = document.createElement("div");
21         newDiv.innerHTML = "新元素";
22         document.body.appendChild(newDiv);
23     }
24 
25     /** 练习2、删除元素: 删除id为div_2的元素 */
26     //parentNode
27     function deleteNode(){
28         var div2 = document.getElementById("div_2");
29         div2.parentNode.removeChild(div2);
30     }
31         
32     /** 练习3、更新元素内容：将div_3的内容更新为当前时间 */
33     function updateNode(){
34         var div3 = document.getElementById("div_3");
35         div3.innerHTML = new Date().toLocaleString();
36     }
37     
38     /* 把所有div内容都改成当前时间 */
39     function updateAllDiv(){
40         var divArr = [];
41         divArr = document.getElementsByTagName("div");
42         for(var i = 0; i < divArr.length; i++ ){
43             divArr[i].innerHTML = new Date().toLocaleString();
44         }
45     }
46 </script>
47 </head>
48 <body>
49     <input type="button" onclick="addNode()"
50             value="创建一个div添加到body中"/>
51     <input type="button" onclick="deleteNode()"
52             value="删除id为div_2的元素"/>
53     <input type="button" onclick="updateNode()"
54             value="将div_3的内容更新为当前时间"/>
55     <input type="button" onclick="updateAllDiv()"
56             value="将所有div内容都改成当前时间"/>
57             
58     <hr/>
59     <div id="div_1">
60         div_1
61     </div>
62     <div id="div_2">
63         div_2
64     </div>
65     <div id="div_3">
66         div_3
67     </div>
68     <div id="div_4">
69         div_4
70     </div>
71     
72 </body>
73 </html>

 

**********************************************************************************

网页换皮肤案例：

 

<html>
<head>
<meta charset="utf-8"/>
<title>网页换肤</title>
<style type="text/css">
    body{font-size:18px;font-family:"微软雅黑";}
    hr{border:1px solid yellow;}
    a{font-size:17px;font-weight:500;}
    a:hover {color:#0099FF;}
    h2,#change-font{text-align:center;}
    #newstext{padding:10px;margin:0 auto;letter-spacing:2px;}
    /* 预先定一些选择器 */
    .min{
        font-size:16px;
    }
    .middle{
        font-size:18px;
    }
    .max{
        font-size:20px;
    }
    .super-max{
        font-size:24px;
    }
</style>
<!-- 引入外部的CSS文件 -->
<link rel="stylesheet" href="#" id="link"/>

<!-- 引入jquery的js库
<script src="js/jquery-1.8.3.min.js"></script> -->
<script type="text/javascript">
    /** 练习1：执行下面的函数，切换字体大小 */
    function resize(size){
        var thisDiv = document.getElementById("newstext");
        thisDiv.className = size;
    }


    //定义数组，存放不同的皮肤（css文件的路径）
    var cssArr = ["css/red.css","css/green.css","css/blue.css","#"];　　//"#"代表恢复默认皮肤
    var index = 0;
    /** 练习2：执行下面的函数，为页面切换不同的皮肤 */
    function changeStyle(){
　　　　　var oLink = document.getElementById("link");
　　　　　oLink.href = cssArr[index];
　　　　　index = (++index)%cssArr.length;
    }
</script>
</head>
<body>
    <h2>啊啊啊啊啊啊啊</h2>
    <div id="change-font">
        <a href="javascript:void(0)"
            onclick="resize('min')">小字体</a>
            <!-- href="javascript:void(0)"阻止超链接跳转 -->
        <a href="javascript:void(0)"
            onclick="resize('middle')">中字体</a>
        <a href="javascript:void(0)"
            onclick="resize('max')">大字体</a>
        <a href="javascript:void(0)"
            onclick="resize('super-max')">超大字体</a>
        <a href="javascript:void(0)"
            onclick="changeStyle()">换肤</a>
    </div>
    <hr/>

    <div id="newstext" class="middle">
        <p>
            啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
        </p>
        <p>
            啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
        </p>
        <p>
            啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊啊啊啊啊啊
        </p>
    </div>

    <hr/>
</body>
</html>

 

**********************************************************************************

posted @ 2020-08-01 17:23  Saturn5  阅读(21)  评论(0)    收藏  举报