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 相关文章推荐
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
Oct 22 Javascript
使用JavaScript 实现各种跨域的方法
May 08 Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
Apr 01 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
详解Vue的异步更新实现原理
Dec 22 Vue.js
利用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中改变图片的尺寸大小的代码
2011/07/17 PHP
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
php 多文件上传的实现实例
2016/10/23 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
JS 事件绑定函数代码
2010/04/28 Javascript
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
jquery实现弹出层登录和全屏层注册特效
2015/08/28 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
Python实现的Kmeans++算法实例
2014/04/26 Python
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
python模块之paramiko实例代码
2018/01/31 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
python中str内置函数用法总结
2020/12/27 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
初中教师业务学习材料
2014/05/12 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
2014年施工员工作总结
2014/11/18 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
详解Go与PHP的语法对比
2021/05/29 PHP
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers