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元素及获取浏览器高宽的简单方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript实用技巧(一)
Aug 16 Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
js获取页面description的方法
May 21 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
Apr 21 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
React冒泡和阻止冒泡的应用详解
Aug 18 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
You might like
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
js实现倒计时时钟的示例代码
2013/12/17 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
jquery+json实现数据二级联动的方法
2015/11/28 Javascript
简介BootStrap model弹出框的使用
2016/04/27 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
详解vue2路由vue-router配置(懒加载)
2017/04/08 Javascript
Vue实现购物车功能
2017/04/27 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
python绘图库Matplotlib的安装
2014/07/03 Python
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
Python3 Random模块代码详解
2017/12/04 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
Python如何批量获取文件夹的大小并保存
2020/03/31 Python
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
心理健康日活动总结
2014/05/08 职场文书
春游踏青活动方案
2014/08/14 职场文书
教书育人演讲稿
2014/09/11 职场文书
大学生作弊检讨书
2014/09/11 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
给领导敬酒词
2015/08/12 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python