快捷導(dǎo)航

Js操作DOM元素及獲取瀏覽器高寬的簡單方法

更新時間：2016年09月08日 09:29:27 投稿：jingxian

下面小編就為大家?guī)硪黄狫s操作DOM元素及獲取瀏覽器高寬的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

在JavaScript中，經(jīng)常會來獲取Document文檔元素，是 HTML 文檔對象模型的英文縮寫，Document Object Model for HTML，是基于瀏覽器編程，HTML DOM 定義了用于 HTML 的一系列標(biāo)準(zhǔn)的對象，以及訪問和處理 HTML 文檔的標(biāo)準(zhǔn)方法。

通過 DOM，可以訪問所有的 HTML 元素，連同它們所包含的文本和屬性?？梢詫ζ渲械膬?nèi)容進(jìn)行修改和刪除，同時也可以創(chuàng)建新的元素。HTML DOM 獨立于平臺和編程語言。它可被任何編程語言諸如 Java、JavaScript 和 VBScript 使用。

childNodes 反回當(dāng)前元素所有子元素的數(shù)組，firsChild返回當(dāng)前元素的第一個下級子元素，lastChild反回當(dāng)前元素的最后一個子元素,nextSibling 返回緊跟在當(dāng)前元素后面的元素,nodeValue指定表元素，的讀/寫屬性 parentNode指定表示元素的父節(jié)點 previousSibling返回緊鄰當(dāng)前元素之前的元素。

document.getElementById是獲取有指定惟一ID屬性值文檔中的元素。document.getElementByTagName返回當(dāng)前元素中有指定標(biāo)記名的子元素的數(shù)組,hasChildNodes()返回一個布爾值,指示元素是否有子元素，document.getElementBycClassName是獲取文檔中的類名元素，document.getElementsByName(elementName) ：通過name獲取節(jié)點，從名字可以看出，這個方法返回的不是一個節(jié)點元素，而是具有同樣名稱的節(jié)點數(shù)組。然后，我們可以通過要獲取節(jié)點的某個屬性來循環(huán)判斷是否為需要的節(jié)點。

想獲取瀏覽器的寬度如下：

網(wǎng)頁可見區(qū)域?qū)挘篸ocument.body.clientWidth
網(wǎng)頁可見區(qū)域高：document.body.clientHeight
網(wǎng)頁可見區(qū)域?qū)挘篸ocument.body.offsetWidth (包括邊線的寬)
網(wǎng)頁可見區(qū)域高：document.body.offsetHeight (包括邊線的寬)
網(wǎng)頁正文全文寬：document.body.scrollWidth
網(wǎng)頁正文全文高：document.body.scrollHeight
網(wǎng)頁被卷去的高：document.body.scrollTop
網(wǎng)頁被卷去的左：document.body.scrollLeft
網(wǎng)頁正文部分上：window.screenTop
網(wǎng)頁正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的寬：window.screen.width
屏幕可用工作區(qū)高度：window.screen.availHeight
屏幕可用工作區(qū)寬度：window.screen.availWidth

下面用一個電子商務(wù)的網(wǎng)頁來具體講一下：

<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 style="margin-top:12px; margin-left:14px;">
            <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 style="background:red"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>

以上這篇Js操作DOM元素及獲取瀏覽器高寬的簡單方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: