浏览器操作系统之界面

最新推荐文章于 2024-03-13 09:08:53 发布

allenlily

最新推荐文章于 2024-03-13 09:08:53 发布

阅读量362

点赞数

分类专栏： DOM javascript 文章标签：浏览器 div function float 文档 url

本文链接：https://blog.csdn.net/allenlily/article/details/7300365

版权

DOM 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

javascript

3 篇文章 0 订阅

订阅专栏

<head>
    <title></title>
    <style type="text/css">
    #imgstyle
    {
       width:200px;
       height:200px;
    }
    #divid
    {
    	float:left;
    	
    }
    </style>
    <script type="text/javascript">
        var datas = { "我的电脑": "mycomputer.png", "我的文档": "mydocument.png", "打印机": "print.png", "垃圾桶": "rubbish.png", "usb接口": "usb.png" }
        function initclick() {
            var bodydest = document.getElementById("bodydest");
            for (var key in datas) {
                var div = document.createElement("div");
                var img = document.createElement("img");
                var p = document.createElement("p");
                p.innerText = key;
                div.id="divid";
                img.id = 'imgstyle';
                img.src = datas[key];
                div.οnclick=function() {
                     var divs=document.getElementsByTagName("div");
                    for(var i=0;i<divs.length;i++){
                        var div=divs[i];
                        if(div==this){
                            div.style.background='Silver';
                        }
                        else
                        {
                            div.style.background='Transparent';
                        }   
                    }   
                    };
                div.appendChild(img);
                div.appendChild(p);
                document.body.appendChild(div);
               }
        }
    </script>
    
</head>
<body style="background-image:url(backgroundimg.jpg)" οnlοad="initclick()" id="bodydest">

</body>
</html>