(知识点)JS中获取元素的样式
首先我们已经知道了JavaScript如果获取一个元素的内部样式,你可以这样做:
<div id="box" style="width:100px;height:100px;background:red"></div> <script> var oBox = document.getElementById('box'); console.log(oBox.style.width); console.log(oBox.style.height); console.log(oBox.style.background); </script>
在这种情况下,获取和设置靠style属性就可以了,因为element.style属性返回的是一组类数组的一组样式属性及对应的值。因此访问具体样式的时候可以采取两种方式即“ele.style.属性名称”和“ele.style['属性名称']”。
但是,要注意的是:对于css样式里的background-color,margin-top等以-相连的属性(在JavaScript中的命名规范中,-是不可用的)。对于这种情况,在使用style属性获取设置样式的时候名称要改为驼峰式,如ele.style.backgroundColor.
——
上述的方法只能用style属性获取到内联样式。
但是现在的文档基本上都遵循分离的思想,样式基本都是外部链接。所以三种方式设置样式都要考虑到:
在Dom标准里有一种全局的方法:getcomputedStyle(obj,null).paddingLeft;
但是事情还没有就这么结束:万恶的IE是不支持这种方法的,但是它提供了一种方法currentStyle,它与全局方法getComputedStyle还有所不同,它是作为Dom元素属性存在的,你可以这样使用obj.currentStyle.paddingLeft;
——
那么最终考虑到兼容性问题:我们可以让浏览器都可以获得元素的全局样式
function getDefaultStyle (obj,attribute) { return obj.currentStyle ? obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj,false)[attribute] }
getComputedStyle的用法是这样window.getComputedStyle(obj,pseudoElt)[attr]
其中pseudoElt表示:after和:before这样的伪类,如果不用的话,设置为null就可以了,
但是在老版本的火狐中,一般只需要一个参数,这里设置为false是为了兼容老版本的火狐。
最后:我们在来回顾一下给元素设置样式的几种方法:
1)外联式Linking(也叫作外部样式)
2)镶入式Embedding(也叫做内页样式)
3)内联式Lnline(也叫作行内样式)
优先级: 内联式>镶入式>外联式
所以,当同时存在且不同时:我们用这种方法得到的总是镶嵌在元素内部的style样式属性。
(知识点)JS中获取元素的样式的更多相关文章
- js中获取元素的样式兼容性的写法
1:设计元素的样式:el.style.color="red"||el.style["color"]="red" 获取元素的样式:el.st ...
- JS中获取元素属性的逆天大法
给大家聊下js中获取元素属性的逆天大法,胆小慎入,切记切记!!! innerHTML.outerHTML.innerText .outerText.value.text().html(),val() ...
- js兼容获取元素的样式
js获取元素的样式的兼容性处理: function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComp ...
- chrome中获取元素的样式
以获取背景颜色为例 html部分 <div id="test">abcd</div> css部分 #test { background-color: rgb ...
- js中获取css的样式
因为给定一个div宽度或者其他样式之后,再设置一个border的宽度在js中得到的obj.setoffWidth就会变成width加上border的二倍宽度,因此可以自己写一个方法来获取样式.(obj ...
- JS中获取元素使用getElementByID()、getElementsByName()、getElementsByTagName()的用法和区别
Web标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问Documnent中的任一个标签: 1 g ...
- js中获取css样式属性值
关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...
- js和jquery中获取非行间样式
样式又分为了行间样式和非行间样式.一般来说行间样式用的是比较少的,因为它能够作用的范围就只有一个元素,而非行间样式的作用范围可以是一类元素(即拥有相同德标签,或者说是有相同的类名,(当然id名不可能相 ...
- (转载)记录函数 getStyle() 获取元素 CSS 样式
设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...
随机推荐
- rpm包相关操作
1.查找已安装的rpm:rpm -qa|grep ewp2.卸载已安装的rpm: 先切换到虚拟机共享路径,执行卸载命令: rpm -e 已安装rpm包名称3.安装新rpm包:rpm -ivh(更新的话 ...
- Gson和Json
一下内容为复制别人的: Gson 是 Google 提供的用来在 Java 对象和 JSON 数据之间进行映射的 Java 类库.可以将一个 JSON 字符串转成一个 Java 对象,或者反过来. j ...
- pxe+kickstart cobbler无人值守装机
环境准备: 一台服务器 [root@admin tftpboot]# cat /etc/redhat-release CentOS Linux release 7.2.1511 (Core) [roo ...
- 解决修改mysql的data_dir所引发的错误
今天,搭建新购的阿里云ECS环境(ubuntu 16.04 LTS),需要将mysql的数据保存在新挂载的磁盘上(已挂载到/mnt下),先停掉mysql服务,然后查看mysql并数据保存的位置: vi ...
- RN 导入原有Xcode项目中,引入Pod依赖出现的问题与解决
RN 导入原有Xcode项目中,引入Pod依赖出现的问题与解决 前言 最近学习React Native技术.将RN引入到原来Xcode项目中有一步:给原来Xcode项目添加所需要的Pod依赖 写好Po ...
- 【Egret】Wing3发布移动APP功能,打包APK流程以及会遇到的问题
流程:1.安装好wing 3,然后 插件--Egret项目工具--发布移动APP--Build android native project 2.配置发布环境: Android 1.egret eng ...
- Linux简介与厂商版本下
2. Linux的厂商版本 在Linux内核基础上,我们还有许多厂商版本.即使有了内核和GNU软件,Linux的安装和编译并不是简单的工作,Linux厂商就是瞄准了这个市场.这些厂商会在Linux内核 ...
- Angularjs 实现移动端在线测评效果
注:此文所用的angular版本为 1.6 一.运行效果图 二.需求 1. 点击选项时,背景变为黄色(即选中状态),并且自动切换到下一题 2. 切换到下一题时,顶部进度随之改变 3. 选中时要把对应的 ...
- android 学习笔记(1)
内容来源:高成珍.钟元生<Android编程经典案例>学习笔记 表格布局——TableLayout 表格布局以行和列的方式来管理界面的布局,但并不能明确声明包含几行几列.可通过TableR ...
- day001-html知识点总结(-)块级。行内元素区分
-.行内元素和块级元素的区别与转换: 区别: 1.从形式上看,在标准文档流中,行内元素会水平方向呈线性排列,而块级元素会各占一行,垂着方向排列. 2.在结构使用上,块级元素可以包含行内元素和块级元素, ...