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 相关文章推荐
通过js脚本复制网页上的一个表格的不错实现方法
Dec 29 Javascript
jQuery 使用手册(二)
Sep 23 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 Javascript
JavaScript Ajax实现异步通信
Dec 14 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
angularjs实现table增加tr的方法
Feb 27 Javascript
JavaScript多种页面刷新方法小结
Apr 04 Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 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调用VC编写的COM组件实例
2014/03/29 PHP
Laravel框架学习笔记(二)项目实战之模型(Models)
2014/10/15 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
跟老齐学Python之编写类之三子类
2014/10/11 Python
Python中的localtime()方法使用详解
2015/05/22 Python
Python探索之ModelForm代码详解
2017/10/26 Python
python中学习K-Means和图片压缩
2017/11/20 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
详解Python time库的使用
2019/10/10 Python
Python日志syslog使用原理详解
2020/02/18 Python
浅析Python 序列化与反序列化
2020/08/05 Python
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
绩效专员岗位职责
2013/12/02 职场文书
写自荐信三大法宝
2014/01/24 职场文书
一月红领巾广播稿
2014/02/11 职场文书
学生周末回家住宿长期请假条
2014/02/15 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
小学三年级学生评语
2014/04/22 职场文书
开学随笔
2015/08/15 职场文书
财务人员入职担保书
2015/09/22 职场文书
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL