js原生获取css属性
原文参考http://blog.csdn.net/lzding/article/details/46317777
1.写在dom上的属性,内联样式
<div id="box" style="background-color:#ccc;margin-top:100px;"></div>
var oBox = document.getElementById('box')
console.log(oBox.style.width)
1)对于复合属性(如background),假设行间设置了样式:background-color:#333,不能通过 element.style.background 来获取(见上面例子)
2)css属性使用驼峰法,如 backgroundColor、marginTop等。
2.写在css中的属性,非内联样式(chrome)
var oBox = document.getElementById('box');
var a = getComputedStyle(oBox, null)['width']; // 100px
1)对于复合属性:使用 getPropertyValue 获取属性值时,不能使用驼峰写法,如:例子中的 getpropertyValue('backgroundColor') 无法正确获得值,而必须写成 background-color
2)另外,以下写法也正确:getComputedStyle(oBox, null)['backgroundColor']、getComputedStyle(oBox, null)['background-color'], 以及 getComputedStyle(oBox, null).backgroundColor 等
js原生获取css属性的更多相关文章
- js中获取css属性
直接获取 window.onload = function() { var but = document.getElementById('button'); var div = document.ge ...
- 为什么我获取不到这个css样式?js原生获取css样式总结
还是自己遇到的一个坑的总结吧!与其说是坑不如说自己学艺不精,让我先哭一会!! 需求 简单就是获取一个css的height (好吧 就是一个这么简单的需求) 实践 好吧 长时间的JQ 我已经对原生无能了 ...
- js中获取css样式属性值
关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...
- JS中使用document.defaultView.getComputedStyle()、currentStyle()方法获取CSS属性值
在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属性 ...
- 自定义属性,innerHTML,outerHTML,dom节点的获取,className,tagName,更改或者是获取css属性
01.自定义属性 1.自定义属性: 作用:保存数据 通用的自定义属性的前缀 data-属性="属性值" 注:自定义的属性不能通过 元素.属性 取属性值 ,需使用getAttribu ...
- JS中获取元素属性的逆天大法
给大家聊下js中获取元素属性的逆天大法,胆小慎入,切记切记!!! innerHTML.outerHTML.innerText .outerText.value.text().html(),val() ...
- JavaScript如何获取css属性
原文:JavaScript如何获取css属性 在web开发中,很多时候我们需要用JavaScript对网页的样式进行修改,接下来,我们就来看一下我们该如何访问css属性,针对不同情况及案例来进行分析. ...
- js原生获取className&多选一
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 第60天:js常用访问CSS属性的方法
一. js 常用访问CSS 属性的方法 我们访问得到css 属性,比较常用的有两种: 1. 利用点语法 box.style.width box.style.top 点语法可以得到 ...
随机推荐
- Angular--TypeScript finalize 方法
self._entityService .getAll() .pipe( finalize(() => { if (self.sheet && self.sheet.length ...
- 2. Javscript学习笔记——引用类型
2. 引用类型 2.1 Object类型 Object 是一个基础类型,其他所有类型都从 Object 继承了基本的行为. 对象是一个包含相关数据和方法的集合(通常由一些变量和函数组成,我们称之为对象 ...
- python函数超时情况应对总结
最近处理一个线程中的函数超时问题. 函数里面有一个地方可能会卡死,我们需要去判断这个是不是卡死了,并做出相应的应对方案. 最开始想的是在函数上增加一个装饰器,使其在超时时抛出异常,然后在其他地方捕获这 ...
- 红米手机3S 3X简单卡刷开发版获得ROOT权限的方法
小米的机器不同手机型号一般小米论坛都提供两个不同的系统,即分别是稳定版和开发版,稳定版没有提供root权限管理,开发版中就支持了root权限,很多情况下我们需要使用的一些功能强大的APP,都需要在ro ...
- 关于CAS
CAS就是Compare And Swap. CAS操作是在每一次做修改操作时,并不加锁,而是在修改时比较旧值是否有变化,如果旧值不变就执行修改,如果旧值有变,则修改失败. 使用sql表示就是 upd ...
- 使用chart.js時取消懸浮在圖表頂部的'undefined'標識
解決方法:在options中設置legend項中display屬性為false options: { scales: { yAxes: [{ ticks: { beginAtZero: true } ...
- J15W-J45W铜截止阀厂家,J15W-J45W铜截止阀价格 - 专题栏目 - 无极资讯网
无极资讯网 首页 最新资讯 最新图集 最新标签 搜索 J15W-J45W铜截止阀 无极资讯网精心为您挑选了(J15W-J45W铜截止阀)信息,其中包含了(J15W-J45W铜截止阀)厂家,(J15 ...
- db2 tsm backup fails with rc–50(1)
2015-01-05-19.21.54.477532+000 E8484227A347 LEVEL: Error PID : 10027058 TID : ...
- Robot Framework自动化测试三(selenium API)
Robot Framework Selenium API 说明: 此文档只是将最常用的UI 操作列出.更多方法请查找selenium2Library 关键字库. 一.浏览器驱动 通过不同的浏览器 ...
- django 中间件记录所有请求及请求执行时间
class LoggingMiddleware(object): def process_request(self, request): request.start_time = time.time( ...