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 点语法可以得到 ...
随机推荐
- c语言-汉诺塔递归调用
#include<stdio.h> int main() { void hano_tower(int n,char one,char two,char three); int m=0; p ...
- Jmeter Grafana Influxdb 环境搭建
1.软件安装 1.Grafana安装 本文仅涉及Centos环境 新建Grafana yum源文件 /etc/yum.repos.d/grafana.repo [grafana] name=grafa ...
- asp 程序 转 php
常年做web的,工作需要,可能有的时候需要将asp代码批量转换成php,最近发现一个小东西很不错,虽不能100%转换(毕竟是程序),但是大大提高了工作效率 Asp2Php是一个可以将ASP转化成PHP ...
- truffle使用详解
truffle使用详解 truffle是什么 Truffle测试环境 安装truffle truffle项目结构解析 文件编译 truffle的配置文件 移植 与合约进行交互 1.truffle是什么 ...
- apt 命令大全
#1. 搜索包 sudo apt-cache search package #2.获取包的相关信息,如说明,大小,版本. sudo apt-cache show package #3.了解包的依赖 s ...
- webpack+vue解决前端跨域问题
webpack 跨域,在这里整理了一下逻辑首先不是为了axios库来进行跨域的,而是直接通过node的webpack设置代理来完成跨域的. 先贴一条自己请求的连接 1.设置自定义域: 在config目 ...
- 利用partial关键字声明分部类和分部方法
一.分部类 1.分部类的定义:简单的说,分部类就是把一个类拆分成多个类,每个类文件只包含其中的一部分,类.结构.接口.方法都可以拆分,在定义的时候加上partial修饰符. 注意:分部类必须属于同一命 ...
- db2 monitor event
1.创建事件监控器至少需要哪些权限? DBADM authority SQLADM authority 2.事件监控器的种类有哪些? 3. db2 flush event monitor eventm ...
- 使用swiper来实现轮播图
使用swiper来实现轮播图 swiper实现轮播图几乎是没有一点点技术含量,但是用起来却很方便,包括对移动端的支持也很好. 由于简单这里当然就不会去详细介绍了,推荐两个网址: 1.http://ww ...
- Oracle 客户端安装
Oracle 客户端的安装方式一种有两种: 1.Oracle标准客户端 点击下载 这是Oracle提供的标准版11r2的客户端 2.Oracle Database Instant Client(即 ...