怎么通过原生JS改变元素的class属性

解决方法:document.getElementById('test').className = 'emphasis' Eg: <!doctype html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Test</title> <style type="text/css"> p { color…

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

原生js获取元素的样式信息

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

原生js获取元素样式

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

Raphael.js改变元素层叠顺序

Raphael.js 元素(Element)改变层叠顺序,Raphael.js是一个矢量绘图库兼容svg和vml.初学时感觉css的z-index能搞定,结果是不支持,不过矢量绘图符合dom标准.可以改变dom加载顺序实现想要的结果. 1.看Raphael.js API,有关于改变层叠的方法,但只找到两个互换.查看源码发现有改变dom结构的方法. 2.XML DOM appendChild() 方法移除原有元素插入到新位置.刚开始以为只新增,不移除原有.走了很多弯路,基础不扎实. 3.Raph…

原生JS获取元素宽高实践详解

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

JavaScript DOM查询，原生js实现元素子节点的获取

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

原生JS获取元素集合的子元素宽度

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

原生JS查找元素

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

原生js获取元素的子元素

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