今天写了一个很简单.很粗暴的通过JS根据类来查找DOM元素. 为了降低它的粗暴等级(耗费性能)我给了三个等级. 首先性能最好的,适合FF,CH,IE8,通过querySelectorAll这个API. 其次是指定ID 最后只能全页面进行匹配class,不过比较节省的性能的是,在指定class名称的时候,同时传入HTML标签的类型,用于节省遍历的范围! 因为水平有限,目前也只能写成这种,真的好好奇JQ的选择器是怎么去匹配DOM的,如果有大神看到这篇文章,请不要吝啬施教... 下面贴代码: func…

工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.width; 该方法基本可以忽略,因为他只能获取到内敛样式.而现在很少会写内联样式.当然他有个好处是可读可写,所以可以据此设置元素的样式. window.getComputedStyle js // 语法如下: window.getComputedStyle('元素','伪元素'); var _css…

开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排查出是获取元素高度那里出了问题,这个问题记忆在书上或视频中看到过,许久没用,用的时候就想当然了.遂决定深入剖析用法,增加记忆,记录发表出来,也能给各位前端同行.求学者增加印象. 出错之处 秉承结构.样式.行为分离的宗旨,每次不管大小案例都是分开写html.css.js.这也算抛砖引出了我犯错的玉. 原css:…

//使用firstChild //但是下面这种因为有空格,也算其子元素 <lable> <span id="onlinePerson" name="person" onclick="changeImg(this)" > <img id="imgPerson" src="images/invote-checked.png">个人 </span> </lab…

摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是,如果没有给元素设置任何样式,也会把浏览器默认的样式返回来. 1.ele.style 在学习DOM的时候就看到通过ele.style来获取元素样式值,但是有时候获取的并非是节点的样式值,而是空值.这是因为ele.style只能获取写在元素标签中…

在网页网页开发中,经常会需要获取某个网页元素的子元素,然后对其进行事件绑定.或样式修改等行为.这些操作对于jquery来说很容易,但是对于原生js会稍微麻烦一些,这里将介绍四种方法获取元素的子元素(本文推荐第四种方法,如果时间有限,请直接把把滚轮滑到底↓↓↓↓↓) 一.childNodes childNodes属性可以获取节点元素的子节点,并将获取到的子节点封装成一个对象: <div class="test" id="test"> <p>&l…

有些时候,在一个网页的ul li中,存在左右两个部分的内容,但是右边元素内容又是不固定,左边元素相对应的不能用固定宽度,所有需要我们动态的获取右边元素宽度,来赋值给左边元素的marginRight值. HTML结构: <ul class="itemCon"> <li class="item"> <div class="leftMess"> <div class="leftCon">…

获取当前对象的样式DOM标准中的全局方法 getComputedStyle(obj).width (获取元素的宽度),但在非标准IE浏览器(IE8)以下有兼容问题IE8以下要这样写 obj.currentStyle.width  这样的话在IE8以下正常显示,但标准浏览器下又会报错,所以一要判断一下 //getStyle()函数,获取元素的非行内样式 //使用方法 getStyle(元素,"属性名") 如:getStyle(oBox,"background") fu…

//删除id var idObject = document.getElementById('sidebar'); if (idObject != null) idObject.parentNode.removeChild(idObject); //通过class获取元素 paras = document.getElementsByClassName('paginator'); for(i=0;i<paras.length;i++){ //删除元素 元素.parentNode.removeChi…

 有下面这三种简单语句. document.getElementsByTagName('body')[0].className = 'snow-container'; //设置为新的 document.getElementsByTagName('body')[0].className += 'snow-container'; //在原来的后面加这个 document.getElementsByTagName('body')[0].classList.add("snow-container&quo…