浅谈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层出不穷,极速的业务扩展提升了团队对开发 ...
随机推荐
- 136.137.260. Single Number && 位运算
136. Single Number 意思就是给你一堆数,每个数都出现了两次,只有一个数只出现了一次,找出这个数 位运算(和c艹一样) &:按位与 |:按位或 ^:异或(一样为0,不一样为1) ...
- BZOJ 2839: 集合计数 解题报告
BZOJ 2839: 集合计数 Description 一个有\(N\)个元素的集合有\(2^N\)个不同子集(包含空集),现在要在这\(2^N\)个集合中取出若干集合(至少一个),使得 它们的交集的 ...
- nginx proxy文件编写总结
upstream.conf upstream api { server 192.168.10.10:8080; server 192.168.10.20:8080;} server{ listen 4 ...
- luogu3292 幸运数字 (点分治+线性基)
首先第一眼是一个倍增套线性基,但是$O(Qlog^2Vlog^N)=10^{10}$的复杂度... 即使是st表也只是变成了$O(Nlog^2Vlog^N)$啊 考虑点分治,相对于倍增显著减少了线性基 ...
- HDU--5519 Sequence II (主席树)
题目链接 2016年长春ccpc I 题 题目大意 : 给你n(n≤2∗105n≤2∗105)个数,每个数的大小 0<Ai≤2∗10^5 0<Ai≤2∗10^5. 再给你m(m≤2∗1 ...
- Building Microservices with Spring Boot and Apache Thrift. Part 1 with servlet
https://dzone.com/articles/building-microservices-spring In the modern world of microservices it's i ...
- UOJ#418. 【集训队作业2018】三角形
#418. [集训队作业2018]三角形 和三角形没有关系 只要知道儿子放置的顺序,就可以直接模拟了 记录历史最大值 用一个pair(a,b):之后加上a个,期间最大值为增加b个 合并? A1+A2= ...
- 使用海康的某款摄像头以及v4l2的经验
Video Capture模式下发现使用MJPEG流和YUYV流相同分辨率视野却不同. 最后没找到怎么设物理窗口或图片窗口的方法,做实验知道了为什么. 设为1280×720 YUYV实际物理窗口是19 ...
- 怎么在linux下创建一个可运行脚本?
1.touch hello.sh 2.vim hello.sh键入i插入#!/bin/shecho hello world;键入:esc:wq3.chmod 700 hello.sh 4. 执行./h ...
- Mac 软件专题:高效率工作和学习工具软件推荐
今天和大家分享软件专题:「高效率工作和学习工具」,简而言之就是提高你工作和学习效率的软件,这对于要天天使用Mac工作或学习的人来说太有帮助了,这里主要分享大家平时经常用的一些,欢迎留言补充. 本文图片 ...