浅谈style.,currentStyle,getComputedStyle,getAttribute
xxx为属性.
ele为元素.
1.style.是针对于样式
在前面的一篇博客中我也有说到,ele.style.xxx; 通常用于赋值,赋值也是针对于行内样式,用它来取值的话,它只能取到内联样式.
今天有另外发现,ele.style.display可以被获取到!–2016.11.10
2.currentStyle是针对于样式
这是ie用来获取样式的方法,通常这样使用:ele.currentStyle.xxx;可以获取内联和外联样式
3.getComputedStyle是针对于样式
除了ie貌似都支持,使用方法:getComputedStyle(ele,false)[xxx];这里出现false的原因是getComputedStyle可以获取伪元素,如果想获取伪元素的 话,将false替换掉即可以获取内联和外联样式
4.getAttribute 针对于属性
ele.getAttribute() 只能获取元素中的内联属性,并且可以获得自定义的属性.
用JS获取Html标签属性有两种方法:
如<a id="link" href="www.baidu.com" title="测试" blogname="前端开发">Web开发</a>
JS代码:
var ka=document.getElementByI d("link");
alert(ka.getAttribute("id"));
alert(ka.id);
两种方法都能弹出a标签的ID属性,但从各浏览器兼容上来说用ka.id的方式更好,但对于自定义属性blogname,则就要用getAttribute()来实现了,如:
alert(ka.getAttribute("blogname")); //前端开发
5.setAttribue针对于属性
赋值也是针对于行内属性,
浅谈style.,currentStyle,getComputedStyle,getAttribute的更多相关文章
- 用JS查看修改CSS样式(cssText,attribute('style'),currentStyle,getComputedStyle)
CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <d ...
- style currentStyle getComputedStyle的区别和用法
先介绍下层叠样式表的三种形式: 1.内联样式,在html标签中style属性设置. <p style="color:#f90">内联样式</p> 2.嵌入样 ...
- 元素高度、宽度获取 style currentStyle getComputedStyle getBoundingClientRect
1.示例代码 (1)html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 浅谈style.height、clientHeight、offsetHeight、scrollHeight
先分别介绍以下,以下资料来自MDN HTMLElement.offsetHeight 是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数. Element.clie ...
- CSSOM之getComputedStyle,currentStyle,getPropertyValue,getAttribute
js关于CSSOM编程的样式相关几个常用的方法 webkit:getComputedStyle,getPropertyValue IE:currentStyle,getAttribute 前言 jqu ...
- 前端性能优化--为什么DOM操作慢? 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM
前端性能优化--为什么DOM操作慢? 作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...
- Js之浅谈dom操作
JavaScript之浅谈dom操作 1.理解dom: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两 ...
- 浅谈Hybrid技术的设计与实现第二弹
前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hybrid技术的设计与实现第三弹——落地篇 接上文:浅谈Hybrid技术的设计与实现(阅读本文前,建议阅读这个先) ...
- 浅谈Hybrid技术的设计与实现
前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hybrid技术的设计与实现第三弹——落地篇 随着移动浪潮的兴起,各种APP层出不穷,极速的业务扩展提升了团队对开发 ...
随机推荐
- hdu 1503 Advanced Fruits(LCS输出路径)
Problem Description The company "21st Century Fruits" has specialized in creating new sort ...
- IO多路复用机制详解
高性能IO模型浅析 服务器端编程经常需要构造高性能的IO模型,常见的IO模型有四种: (1)同步阻塞IO(Blocking IO):即传统的IO模型. (2)同步非阻塞IO(Non-blocking ...
- 【SFA官方翻译】使用 Kubernetes、Spring Boot 2.0 和 Docker 的微服务快速指南
[SFA官方翻译]使用 Kubernetes.Spring Boot 2.0 和 Docker 的微服务快速指南 原创: Darren Luo SpringForAll社区 今天 原文链接:https ...
- vue $emit 用法
1.父组件可以用props传递给子组件. 2.子组件可以利用$emit触发父组件事件. vm.$emit('父组件方法',参数); vm.$on(event,fn); $on监听event事件后运行f ...
- PMP项目管理考试培训机构内部资料打包赠送(3个PPT)
PMP认证考试我自己这边是今年6月份考过了的,手里觉得对自己有帮助的资料就是这3个PPT,讲解的比较清晰,知识点详细.结合自己做的笔记,备考十分轻松.所以推荐大家也看一下. 有需要的可以联系. PPT ...
- 2018.12.21 浪在ACM 集训队第十次测试赛
浪在ACM 集训队第十次测试赛 A Diverse Substring B Vasya and Books C Birthday D LCM A 传送门 题解 B 传送门 题解: 这道题,就比较简单 ...
- Codeforces Round #523 (Div. 2) C Multiplicity (DP)
传送门 https://www.cnblogs.com/violet-acmer/p/10005351.html 题意: 给定一数组a[],从a[ ]中除去任意个元素得到b[ ],求能形成多少“好序列 ...
- js怎么获取微信浏览器内容的高度
通过window对象来得到窗口相关的内外款高度信息,如下: outerHeight属性设置或返回一个窗口的外部高度,包括所有界面元素(如工具栏/滚动条).outerWidth属性设置或返回窗口的外部宽 ...
- Code review应该怎么做
代码评审有两种不同的方法,一种是代码走查,一种是代码审查,我们这里讨论的仅指代码走查.通常自己写的代码都难以发现问题,需要以第二双眼睛再次检查代码,帮助我们及时地发现潜在的问题. 做代码审查之前,团队 ...
- 流明(lux)和坎德拉;
流明是光照度: 坎德拉是光强: 流明是光通量的单位, cd是光强单位 光强是单位立体角的光通量: 照度是单位面积的光通量: 尼特是亮度单位 1尼特 = 1CD/m^2: 1 lx = 1 流明每 ...