精华内容
下载资源
问答
  • 关于解决IE8以下版本获取DOM节点的方法 在前端开发中用 js 对 html 进行操作,在获取DOM节点的时候我们会用到类选择器,但是类选择器并不是能够在所有的浏览器下正常运行,或许大家已经猜到,没错就是IE(8以下),...

    关于解决IE8以下版本获取DOM节点的方法

         在前端开发中用 jshtml 进行操作,在获取DOM节点的时候我们会用到类选择器,但是类选择器并不是能够在所有的浏览器下正常运行,或许大家已经猜到,没错就是IE(8以下),或许有人会所现在谁还用IE,但是作为一个程序员,在遇到问题我们都应该去寻找解决的方法,那我们就得自己来封装获取类名节点的方法,下面是我自己的一些方法。


    下面是我代码:

    <style>
        .box{
          width: 200px;
          height: 200px;
          background-color: red;
        }
      </style>
    </head>
    <body>
      <div class="box"></div>
      
    </body>
    

    首先创建一个div,给其默认样式,效果如下;

    当我们用各个浏览器都可以获得类名DOM节点,但是IE8一下就死这种情况:


    所以,我们就得自己来封装一个函数,来获取html中的DOM操作节点。

    代码如下:

    
    <script type="text/javascript">
    if (!document.getElementsByClassName) {                                                 //如果浏览器不支持document.getElementsByClassName
      document.getElementsByClassName = function (className, element) {                     //我们先将要写的方法封装成一个函数
          var children = (element || document).getElementsByTagName('*');                   //获取html中所有的DOM节点 
          var elements = [];                                                                //用一个空数组存放要获取的class类名
          for (var i = 0; i < children.length; i++) {
              var child = children[i];                                                        
              var classNames = child.className.split(' ');                                    //将所有的class节点保存在一个数组之中
              for (var j = 0; j < classNames.length; j++) {                                 //遍历循环,将满足要求的class存入elements空数组中
                  if (classNames[j] == className) {
                      elements.push(child);
                      break;
                  }
              }
          }
          return elements;                                                                    //返回新的数组
      };
    }
    var a = document.getElementsByClassName("box");
    console.log(a);
    a[0].style.background = "blue";
    </script>
    

    整体思路:

    1.先判断是否支持 document.getElementsByClassName 直接获取class DOM节点
    2.先获取html所有的DOM节点,并新建一个数组存放需要获取的class 类名
    3.循环遍历,将满足要求的class存入elements空数组中
    4.返回我们得到的新的数组,这个数组就是我们存放类名的数组

    我们先看下 a 打印出来的什么什么

    很显然打印出来的是一个数组对象,那么我们就可以通过索引对class进行操作了;

    下面是我执行的结果:

    这就证明我们用类名对html进行了操作节点进行了操作。

    展开全文
  • $(a)[0].blog在ie7、8下可以正确拿到danney值。但是在ie9-11都拿到undefined。chrome也是undefined。 所以在代码中尽量避免这种获取属性的方式。 错误案例如下: $('a').click(function(){ v

    <a href="baidu.com" blog='danney'></a>

    这里我们在dom上添加了一个自定属性blog='danney',假设我们当前是引入了jquery的

    $(a)[0].blog在ie7、8下可以正确拿到danney值。但是在ie9-11都拿到undefined。chrome也是undefined。

    所以在代码中尽量避免这种获取属性的方式。

    错误案例如下:

    $('a').click(function(){

    var blog = this.blog;//坚决杜绝这种方式

    balabala....

    })

    展开全文
  • document.all){ //zzcv的ff ie兼容脚本 /*脚本没有解决的问题及处理: 2.IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象. 解决方法:统一使用[]获取集合类对象. 3.IE下,可以使用获取常规...
  • ExtJs 获取Dom对象

    千次阅读 2016-09-29 11:23:23
    ExtJs 中会有三类基本对象,htmlelement , Ext.Element 和 CompositeElement 。 分别解释一下: ... Ext.Element 是最重要的EXT对象,在dom对象的基础上,又包装了很多方法和属性,可以用 ...

    ExtJs 中会有三类基本对象,htmlelement , Ext.Element 和 CompositeElement 。

    分别解释一下:

    htmlelement 指html页面的各种标记元素,可以用 document.getElementById() 获得,具有html对象的方法和属性。

    Ext.Element 是最重要的EXT对象,在dom对象的基础上,又包装了很多方法和属性,可以用  Ext.get() 获取。 

    CompositeElement 是一组EXT.Element的集合对象。通过fist(),last(),item()等获得Ext.Element对象,再Ext.select()选择多个对象时返回的就是这种对象。

     

    如果不用ExtJs的话,纯JS的DOM操作(此处仅介绍对元素的查找),主要有以下几种:

    1、document.getElementById

    2、document.getElemenstByClassName(该方法在IE6,7,8中不支持)

    3、document.getElementsByTagName

    4、document.getElementsByName

    (注意:通过id找对象的方法的Element是单数,而通过类名找对象的方法的Elements是复数,多了一个s的别遗漏!这个也好理解,id是唯一的,clss是不唯一的~)

     

    如果用ExtJs对元素进行查找,常用的有以下几种:

    1、Ext.getCmp("id")   

    这是通过id找到的Ext对象,注意是Ext对象而不是html对象,两者是有区别的!

    2、Ext.select(".className")

    注意类名前面有一个点! .className

    这是通过class类名找到的CompositeElement  不是Ext对象也不是html对象,三者是有区别的!

    不过三者之间的转换也简单

    Ext.select(".className").elements  这就是html对象了。

    Ext.getCmp(Ext.select(".className").elements[0].id)    这就是Ext对象了。

     

    其它更多的ExtJs 获取页面中对应元素的方法可见参考链接:extjs 获取Dom对象

     

     

    展开全文
  • 介绍 解决各个浏览器下 获取dom 元素的 位置 兼容性 ie 6 7 8 firefox 3.6 chrome 4.0 目前只测试了这几个浏览器 作者 Jelle · lu QQ:271412542 Email:idche@qq.com blogs:http://www.cnblogs.com/idche/ 源码说明 ...
  • 在动态操作 dom 元素时,如果我们要获取或设置一个元素的宽高、top、left 等样式时,jq 中的 .css 是常见的方法,那么在原生 js 中呢?首先想到的就是 element.style 方法,这个方法虽然可以获取也可以设置 dom 元素...

    在动态操作 dom 元素时,如果我们要获取或设置一个元素的宽高、top、left 等样式时,jq 中的 .css 是常见的方法,那么在原生 js 中呢?首先想到的就是 element.style 方法,这个方法虽然可以获取也可以设置 dom 元素的样式,但也很有局限性,下面总结一下原生 js 获取 dom 元素样式的几种方法与区别~

    1. HTMLElement.style

    mdn 传送门

    HTMLElement.style 属性返回一个 CSSStyleDeclaration 对象,表示元素的 内联style 属性(attribute),但无法读取内嵌和外部的样式表属性。

    2. Element.currentStyle

    mdn 传送门

    与后面要提的 window.getComputedStyle 功能相同,这里可以获取的css样式不限内联、内嵌还是外部样式表的设置

    不过这是非标准属性,该方法仅限IE浏览器,且为只读属性,不推荐使用

    3.Window.getComputedStyle()

    mdn 传送门

    可以获取内联、内嵌还是外部样式表所有的 css 样式

    4.Element.getBoundingClientRect()

    mdn 传送门

    这个方法可能是最偏门的一种用法

    用于获取某个元素相对于视窗的位置集合。返回的对象中有 top, right, bottom, left,width,height 等属性。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

    展开全文
  • 我们在日常的工作场景下会遇到需要修改页面元素的样式问题,特别是使用原生js获取元素的样式,如果只是获取在元素的内联样式,可以通过Element.getAttribute(attr)来获取元素的属性,但是如果获取的是DOM元素的css...
  • IE8浏览器下用name属性去获取dom元素时居然是不区分大小写的。 比如: 如上有2个input输入框,它们的name属性分别是大写C1和小写c1 在获取元素时,在谷歌浏览器下使用jqury获取:$("input[name='c1']").length /...
  • 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口。...我们用JavaScript对网页进行的所有操作都是通过DOM进行的。...JS获取DOM元素的方法(8种) 通过ID获...
  • JavaScript获取DOM元素位置和尺寸大小

    万次阅读 2016-10-22 21:22:43
    JavaScript获取DOM元素位置和尺寸大小
  • JS获取DOM元素的方法

    千次阅读 2017-12-01 10:36:53
    1、通过ID选取元素(getElementById) ... 2)兼容性:低于IE8版本的IE浏览器对getElementById方法的实现是不区分元素ID号的大小写的,并且会返回匹配name属性的元素。 2、通过名称name选取元素(getElem
  • JS中获取DOM元素的方法总共有5种: 1.通过id值。 2.通过name属性值。 3.通过指定的标签名。 4.通过class类名。 5.通过css选择器(css选择器如何选择,就可以如何选择) 1、通过id选取元素(getElementById) 1)使用...
  • JS获取DOM元素位置与大小

    千次阅读 2018-08-29 16:57:00
    JS获取DOM元素位置与大小 https://www.cnblogs.com/mackxu/archive/2012/12/29/html_window_dimension_position.html 每一个HTML元素都有以下属性 offsetWidth offsetHeight offsetLeft offsetTop ...
  • js 获取DOM元素样式

    千次阅读 2018-05-23 14:04:21
     行内样式:一般是用style写在dom元素上的,例如:&lt;div style='height:200px;'&gt;&lt;/div&gt;; 内嵌样式:一般是用style写在head标签内的。&lt;style type='text/css'&gt;&lt;/...
  • 代码如下:var LF = {}; LF.version = ‘1.0.0’; //全局函数 function $(objName) { return document.getElementById(objName); } function $name(objName) { return document.getElementsByName(objName);...
  • 令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过): 1. 通过顶层document节点获取: (1) document.getElementById(elementId):该方法通过...
  • 1、innerHTML : 设置或返回元素之间的文本,...3、textContent : 设置或返回指定元素的文本内容,IE8之前不支持 获取值: var str=box.innerHTML; var str2=box.innerText; var str3=box.textContent; 设置值: box.i...
  • window....ie8及其ie8以下不兼容 elem.currentStyle Ie独有的函数封装一个getStyle函数 处理各浏览器之间的兼容性//封装getStyle function getStyle(elem,prop){//elem dom元素 prop 元素属性 if(wind
  • vue ref获取DOM元素和组件

    千次阅读 2019-01-05 14:04:56
    &lt;!DOCTYPE html&gt; &lt;html lang="en"...UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &
  • 今天需要写一个滑动的特效,在开发的过程中发现,通过js获取dom的style样式时,style中的属性全是空字符串,而css中明明已经定义了bottom,z-index等等属性。 查阅了相关资料后了解到,js获取到的dom对象的style通常...
  • 获取dom元素的宽度和高度

    千次阅读 2017-07-31 20:58:15
    获取dom元素的宽度和高度 一、获取css的大小1.第一种通过内联样式var box = document.getElementById('box'); var w = box.style.width; var h = box.style.height; 2.通过计算元素的大小(但是在ie情况下有一个...
  • 下面代码演示了如何在waitr中获取dom属性。 在进行自动化测试时,我们经常要获取这样的一些信息: 某dom元素的class值,用以判断该dom元素是否具有正确的样式;某dom元素的style属性,用以判断该dom元素是否具有...
  • JS获取dom的CSS样式

    千次阅读 2018-06-20 18:08:44
    获取样式//获取样式属性值 function getStyle(obj, attr) { if(obj.currentStyle) { //兼容IE return obj.currentStyle[attr];  } else { //兼容火狐谷歌 return window.getComputedStyle(obj,false)[attr...
  • JavaScript获取DOM元素的方法总结

    千次阅读 2017-11-21 21:00:39
    在Web开发中,经常要获取页面中某个元素,然后更新该元素的样式、内容等。如何获取要更新的元素,是首先要解决的问题。令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结: 1. 通过顶层...
  • document.getElementById...如果要获取css中设置的样式,可以试试 getComputedStyle(标准浏览器)或者 currentStyle (ie低版本) let target = document.getElementById('target') // 获取目标伪元素样式 getComp...
  • clientX,clientY,获取鼠标在可视区域中的坐标(和页面长度无关); screenX,screenY,获取鼠标相对于电脑屏幕左边和上边的坐标;
  • 什么是HTML DOM文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口。...我们用JavaScript对网页进行的所有操作都是通过DOM...JS获取DOM元素的方法(8种)通过ID获取(getEleme...
  • 四舍五入解析的浏览器:IE8IE9、Chrome、Firefox 直接取整解析的浏览器:IE7、Safari 获取元素精确的宽度/高度(带小数位像素) 问题:document.getElementById(id).style.width 只能获取元素行内样式的值 解决...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 80,465
精华内容 32,186
关键字:

8ie获取dom