原生js提取非行间样式
js用style属性可以获得html标签的样式，但是不能获取非行间样式，如何获取css的非行间样式呢，在低版本ie我们可以用currentStyle，在其他浏览器我们可以用getComputedStyle。
1、ie
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width:200px;
height:200px;
background: skyblue;
}
</style>
<script>
window.onload=function(){
var box=document.getElementById("box");
alert(box.currentStyle["width"]); //200px
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
2、其他浏览器
alert(getComputedStyle(box,false)["width"]); //200px
3、兼容
<script>
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
} window.onload=function(){
var box=document.getElementById("box");
alert(getStyle(box,"width")); //兼容ie及其他浏览器
}
</script>
4、获取及设置非行间样式
<script>
function getStyle(obj,attr,value){
if(arguments.length==2){ //根据参数个数执行相应操作
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}else{
obj.style[attr]=value; //这里需要注意，使用obj.style.attr无效
} } window.onload=function(){
var box=document.getElementById("box");
getStyle(box,"backgroundColor","yellowgreen"); //把盒子的背景颜色设置成黄绿色
alert(getStyle(box,"width")); //弹出盒子的宽度200px
}
</script>
原生js提取非行间样式的更多相关文章
- JS获取非行间样式
我们都知道用offset函数获取元素样式是一件很方便的事,但是offset只能获取行间样式,而无法获得非行间样式,这是它的瓶颈所在. 我们都知道js获取行间样式的方法,那么js是如何获取行距样式的呢? ...
- js获取非行间样式/定义样式
<!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...
- JS获取非行间样式及兼容问题
获取非行间样式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- js获取非行间样式或定义样式
<!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...
- js获取非行间样式/写入样式（行间）
<!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...
- js 获取非行间样式
1.getComputedStyle(nodeObj,false):该方法是BOM对象,第一个是要获取样式的节点对象:第二个可以写成任何的字符一般写成false或者null,这里最好是用false因为 ...
- JS取非行间样式
<title>无标题文档</title> <style> #div1{width:200px;height:200px; background:red;} < ...
- js和jquery中获取非行间样式
样式又分为了行间样式和非行间样式.一般来说行间样式用的是比较少的,因为它能够作用的范围就只有一个元素,而非行间样式的作用范围可以是一类元素(即拥有相同德标签,或者说是有相同的类名,(当然id名不可能相 ...
- js兼容总结之获取非行间样式
非行间样式案例 #div1 { width: 200px; height: 200px; background: red; } IE获取非行间样式 var oDiv = document.getEle ...
随机推荐
- MySQL创建民族表的SQL语句
MySQL创建民族表的SQL语句 CREATE TABLE `nation` ( `id` ) unsigned NOT NULL AUTO_INCREMENT, `nation` ) NOT NUL ...
- [Bzoj4818]序列计数（矩阵乘法+DP）
Description 题目链接 Solution 容斥原理,答案为忽略质数限制的方案数减去不含质数的方案数 然后矩阵乘法优化一下DP即可 Code #include <cstdio> # ...
- python-2函数
http://docs.python.org/3/library/functions.html 或者菜鸟中文资料 1-使用函数 abs(-20)#求绝对值 max(1,4,200,3,2) #求最大的 ...
- 購買管理(MM)
■購買管理■ [購買伝票]EKKO: ヘッダ EKPO: 明細 EKET: 納入日程行 EKPA: 取引先機能 EKKN: 勘定設定 EKBE: 後続伝票 EKBEH: 削除済み後続伝票履歴 [請求書 ...
- 2，版本控制git --分支
有人把 Git 的分支模型称为它的`‘必杀技特性’',也正因为这一特性,使得 Git 从众多版本控制系统中脱颖而出. 为何 Git 的分支模型如此出众呢? Git 处理分支的方式可谓是难以置信的轻量, ...
- Docker构建nginx+uwsgi+flask镜像（二）
Dockerfile搭建环境并打包应用 在上一章Docker构建nginx+uwsgi+flask镜像(一)的学习中,我们学会用命令行一句一句在alpine环境中搭建nginx+uwsgi+flask ...
- hadoop集群之Datenode无法启动解决办法
hadoop集群之Datenode无法启动解决办法 我们在启动hadoop集群的时候,通过jps查看进程,发现namenode RM和Secondary NameNode都有,但datanode没有启 ...
- 线程间通信（等待，唤醒）&Java中sleep()和wait()比较
1.什么是线程间通信? 多个线程在处理同一资源,但是任务却不同. 生活中栗子:有一堆煤,有2辆车往里面送煤,有2辆车往外拉煤,这个煤就是同一资源,送煤和拉煤就是任务不同. 2.等待/唤醒机制. 涉及的 ...
- Android学习记录（5）—在java中学习多线程下载之断点续传②
在上一节中我们学习了在java中学习多线程下载的基本原理和基本用法,我们并没有讲多线程的断点续传,那么这一节我们就接着上一节来讲断点续传,断点续传的重要性不言而喻,可以不用重复下载,也可以节省时间,实 ...
- ARC下还会存在内存泄露吗？
1.第三方框架不正当使用.2.block,delegate,NSTimer循环使用.3.非oc对象的内存处理.4.地图类处理.5.大次数循环内存暴涨. 非oc对象的释放: 例如使用CGImageRel ...