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 指导方针
Apr 05 Javascript
javascript中的注释使用与注意事项小结
Sep 20 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 Javascript
JS上传前预览图片实例
Mar 25 Javascript
谈谈JavaScript中function多重理解
Aug 28 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 Javascript
关于iframe跨域POST提交的方法示例
Jan 15 Javascript
详解打造 Vue.js 可复用组件
Mar 24 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
详解JavaScript中的函数、对象
Apr 01 Javascript
利用javaScript处理常用事件详解
Apr 14 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
php stream_get_meta_data返回值
2013/09/29 PHP
wordpress网站转移到本地运行测试的方法
2017/03/15 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
javascript 数据存储的常用函数总结
2017/06/01 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
详解Puppeteer 入门教程
2018/05/09 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
python读文件逐行处理的示例代码分享
2013/12/27 Python
Python验证码识别处理实例
2015/12/28 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
python requests库的使用
2021/01/06 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
MyFrenchPharma中文网:最大的法国药妆平台
2016/10/07 全球购物
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
美国五金商店:Ace Hardware
2018/03/27 全球购物
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
研究生自荐信
2013/10/09 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
业务员岗位职责范本
2015/04/03 职场文书
手机销售员岗位职责
2015/04/11 职场文书
Python学习之时间包使用教程详解
2022/03/21 Python
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python