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 点语法可以得到 ...
随机推荐
- TortoiseSVN查看修改时报错的解决方法
提交Bug后很快就修复了,给Stefan点个赞.大家等新版本(1.11.1)发布就可以了. -------------------------分割线下是原文---------------------- ...
- 03. PNG,GIF,JPG的区别及如何选?
3.PNG,GIF,JPG的区别及如何选? 照片用 JPG. 动画用 GIF. Logo.Icon 等小图用 PNG-8. 非特殊情况,尽量不要用 PNG-24 和 PNG-32.
- rm: cannot remove `xxx’: Operation not permitted问题的处理方案
第一步:22.txt lsattr 22.txt 查看文件属性 看到的情况 -----a------- 第二步:去除a的属性 chattr -a 22.txt 第三步:在此执行删除 rm 22.txt
- 使用pageHelper遇到的问题
在做SSM整合的时候,遇到一个小问题,在我使用pageHelper的时候,分页的效果总是无法正确显示,卡了我几个小时,现在来说一下我的问题. 1.首先导入pageHelper的包: <!--引 ...
- vue-lazyload图片懒加载的简单使用
一.vue lazyload插件: 插件地址:https://github.com/hilongjw/vue-lazyload demo:http://hilongjw.github.io/vue-l ...
- HBase的Java Api连接失败的问题及解决方法
分布式方式部署的HBase,启动正常,Shell操作正常,使用HBase的Java Api操作时总是连接失败,信息如下: This server is in the failed servers li ...
- ORA-24247:网络访问被访问控制列表(ACL)拒绝
今天将一个发送数据库监控邮件的procedure 从10g 迁移到11g,不工作了.处理记录如下: 在Oracle11g中,Oracle在安全方面有了很多的改进,而在网络权限控制方面,也有一个新的概念 ...
- java NIO学前准备
之前一直对NIO感兴趣,无奈对IO的很多概念很模糊,所以对于NIO的学习也是一直半解,最近在网上查阅了很多资料,发现有很多概念是需要反复理解的,有的时候甚至当时理解了,但一段时间后又忘记了,所以决定自 ...
- CSS生成小三角
前言:小三角的应用场景:鼠标移动到某个按钮上面,查看信息详情时,信息详情弹出框有时候会需要一个小三角. 代码如下: <div id='triangle'></div> #tri ...
- python2.7 输入&函数参数&路径表示&各种下标_含义
1.Python2.x与3.x的input区别 input与python3不同,在python2.7中分为input()与raw_input() 其中input()返回的是int/float类型数据, ...