DDR爱好者之家

Js操作DOM元素及获取浏览器高宽的简单方法
站长资源 2024/11/28 佚名
7 1538
DDR爱好者之家 Design By 杰米

在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 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="/UploadFiles/2021-04-02/1.png">


以上这篇Js操作DOM元素及获取浏览器高宽的简单方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米