首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Js操作DOM元素及获取浏览器高宽的简单方法

Posted in Javascript onSeptember 08, 2016

在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>      全部商品分类</h3></a></div>
    <div id="main">
        <div id="left">
          <ol style="margin-top:12px; margin-left:14px;">
            <p><a href="#">Kindle电子阅读器   ></a></p>
            <p><a href="#">Fire平板电脑          ></a></p>
            <p><a href="#">Kindle电子阅读器   ></a></li>
            <p><a href="#">Fire平板电脑          ></a></p>
            <p><a href="#">Kindle电子阅读器   ></a></li>
            <p><a href="#">Fire平板电脑          ></a></p>
            <p><a href="#">Kindle电子阅读器   ></a></li>
            <p><a href="#">Fire平板电脑          ></a></p>
            <p><a href="#">Kindle电子阅读器   ></a></li>
            <p><a href="#">Fire平板电脑          ></a></p>
            <p><a href="#">Kindle电子阅读器   ></a></li>
            <p><a href="#">Fire平板电脑          ></a></p>
            <p><a href="#">Kindle电子阅读器   ></a></li>
            <p><a href="#">Fire平板电脑          ></a></p>
            <p><a href="#">Kindle电子阅读器   ></a></li>
            <p><a href="#">Fire平板电脑          ></a></p>
            <p><a href="#">Kindle电子阅读器   ></a></li>
            <p><a href="#">Fire平板电脑          ></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元素及获取浏览器高宽的简单方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

Js操作DOM元素及获取浏览器高宽的简单方法

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
js读取cookie方法总结
Oct 31 Javascript
三种带箭头提示框总结实例
Jun 14 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
JavaScript实现复制文章自动添加版权
Aug 02 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
zTree获取当前节点的下一级子节点数实例
Sep 05 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 #Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 #Javascript
JS输出空格的简单实现方法
Sep 08 #Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 #Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 #Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 #Javascript
jQuery Dialog 取消右上角删除按钮事件
Sep 07 #Javascript
OpenFeign(1) webpack(1) calc(1) NTP(1) K8s(1) SandBox(1) Windows Server(4) Hive(5) swing(1) Windows Server 2022(3)
You might like
介绍一些PHP判断变量的函数
2012/04/24 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
Javascript 函数中的参数使用分析
2010/03/27 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
工作中常用到的ES6语法
2018/09/04 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
Layui实现带查询条件的分页
2019/07/27 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
[02:15]2014DOTA2国际邀请赛 赛后退役选手回顾
2014/08/01 DOTA
Python3 入门教程 简单但比较不错
2009/11/29 Python
Python获取远程文件大小的函数代码分享
2014/05/13 Python
Python使用py2exe打包程序介绍
2014/11/20 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
Python调用C语言的实现
2019/07/26 Python
python代码xml转txt实例
2020/03/10 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
以下的初始化有什么区别
2013/12/16 面试题
.net面试题
2016/09/17 面试题
extern是什么意思
2016/03/10 面试题
大学生职业规划前言模板
2013/12/27 职场文书
简易离婚协议书（范本）
2014/10/25 职场文书
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python