你的位置:首页 > Java教程

[Java教程]Js操作DOM元素及获取浏览器高宽


在JavaScript中,经常会来获取Document文档元素,是 HTML 文档对象模型的英文缩写,Document Object Model for HTML,是基于浏览器编程,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法。

通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性。可以对其中的内容进行修改和删除,同时也可以创建新的元素。HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。

  childNodes 反回当前元素所有子元素的数组,firsChild返回当前元素的第一个下级子元素,lastChild反回当前元素的最后一个子元素,nextSibling 返回紧跟在当前元素后面的元素,nodeValue指定表元素,的读/写属性 parentNode指定表示元素的父节点 previousSibling返回紧邻当前元素之前的元素。

 document.getElementById是获取有指定惟一ID属性值文档中的元素。document.getElementByTagName返回当前元素中有指定标记名的子元素的数组,hasChildNodes()返回一个布尔值,指示元素是否有子元素,document.getElementBycClassName是获取文档中的类名元素,document.getElementsByName(elementName) :通过name获取节点,从名字可以看出,这个方法返回的不是一个节点元素,而是具有同样名称的节点数组。然后,我们可以通过要获取节点的某个属性来循环判断是否为需要的节点。

想获取浏览器的宽度如下:

 网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth

  下面用一个电子商务的网页来具体讲一下:

  <html>
    <head>
        <title></title>
        <style>
            *{ margin:0; padding:0;}
            a{ text-decoration:none; color:white;}
            a:hover{color:red;}
            ul,li,ol{list-style:none; font-size:13px; color:#fff;line-height:27px;}
            img{border:none;}
            img,input,select,textarae{vertical-align: middle}
            body{ width:1350px; margin:0 auto; font-size:12px;}
            ol li a{color:#fff;}



            #header{width:1350px; height:37px; background:url(122.png) no-repeat; border-bottom:1px solid #c9c9c9; line-height:37px;}
            #main{width:1350px; height:504px; background:#f8f8f8;}
            #left{width:182px; height:500px; background:#3d4e64; border-radius:3px;float:left;}
            #lunbo{width:1160px;
                height:300px;
                background:#f8f8f8;
                border-bottom:2px solid #666666;
                float:right;
                margin:0 auto;
                margin-top:10px;
                position:relative;}

            #lunbo img{width:1160px;
                height:300px;
                display:none;
                position:absolute;
                z-index:5;
                }
            ul{margin-left:400px;}
            ul li{
                list-style:none;
                border:1px solid #000;
                border-radius:50%;
                width:18px;
                height:18px;
                text-align:center;
                float:left;
                margin-top:300px;
                margin-left:10px;
                z-index:15;
                }

        </style>
    </head>
    <body>
        <div id="header"><a href="#"><h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;全部商品分类</h3></a></div>
        <div id="main">
                <div id="left">
                    <ol >
                        <p><a href="#">Kindle电子阅读器&nbsp;&nbsp;&nbsp;></a></p>
                        <p><a href="#">Fire平板电脑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></a></p>
                        <p><a href="#">Kindle电子阅读器&nbsp;&nbsp;&nbsp;></a></li>
                        <p><a href="#">Fire平板电脑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></a></p>
                        <p><a href="#">Kindle电子阅读器&nbsp;&nbsp;&nbsp;></a></li>
                        <p><a href="#">Fire平板电脑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></a></p>
                        <p><a href="#">Kindle电子阅读器&nbsp;&nbsp;&nbsp;></a></li>
                        <p><a href="#">Fire平板电脑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></a></p>
                        <p><a href="#">Kindle电子阅读器&nbsp;&nbsp;&nbsp;></a></li>
                        <p><a href="#">Fire平板电脑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></a></p>
                        <p><a href="#">Kindle电子阅读器&nbsp;&nbsp;&nbsp;></a></li>
                        <p><a href="#">Fire平板电脑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></a></p>
                        <p><a href="#">Kindle电子阅读器&nbsp;&nbsp;&nbsp;></a></li>
                        <p><a href="#">Fire平板电脑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></a></p>
                        <p><a href="#">Kindle电子阅读器&nbsp;&nbsp;&nbsp;></a></li>
                        <p><a href="#">Fire平板电脑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></a></p>
                        <p><a href="#">Kindle电子阅读器&nbsp;&nbsp;&nbsp;></a></li>
                        <p><a href="#">Fire平板电脑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></a></p>
                    </ol>
                    
                </div>
                <div id="lunbo">
                        
                        <img src="1.png">
                        <img src="2.png">
                        <img src="3.png">
                        <img src="4.png">
                        <img src="5.png">

                        <ul>
                        <li onmouseover="jin(0)"onmouseout="chu(0)">1</li>
                        <li onmouseover="jin(1)"onmouseout="chu(1)">2</li>
                        <li onmouseover="jin(2)"onmouseout="chu(2)">3</li>
                        <li onmouseover="jin(3)"onmouseout="chu(3)">4</li>
                        <li onmouseover="jin(4)"onmouseout="chu(4)">5</li>
                        </ul>
                </div>

                <div id="footer"><img src="121.gif"/></div>
        </div>

    </body>
    <script>
        p=document.getElementsByTagName("img");
        l=document.getElementsByTagName("li");
        m=0
        onload=function(){
                    s=setInterval("kaishi()",850)
                    }

        function kaishi(){
                    for(var i=0;i<5;i++){    
                                p[i].style.display="none";
                                l[i].style.background="white"
                                }
                                m++;
                                if(m>=5){m=0;}
                                p[m].style.display="block";
                                l[m].style.background="red"
                }
        lunbo.onmouseover=function(){clearInterval(s);}
        lunbo.onmouseout=function(){s=setInterval("kaishi()",850);}
        
        function jin(hand){
                        for(var i=0;i<5;i++){    
                                p[i].style.display="none";
                                l[i].style.background="white"
                                }
                                m++;
                                if(m>=5){m=0;}
                                p[hand].style.display="block";
                                l[hand].style.background="red"
                        }
        function chu(hand){
                m=hand;
                }
    </script>
</html>