原生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 ...
随机推荐
- 【PHP项目】伪静态规则
伪静态规则写法RewriteRule-htaccess详细语法使用 2016年03月30日 16:53:59 阅读数:20340 伪静态实际上是利用php把当前地址解析成另一种方法来访问网站,要学伪静 ...
- Apache 设置二级域名
开启重写模块 LoadModule rewrite_module modules/mod_rewrite.so 编辑配置 NameVirtualHost *:80 <VirtualHost *: ...
- spark中的RDD以及DAG
今天,我们就先聊一下spark中的DAG以及RDD的相关的内容 1.DAG:有向无环图:有方向,无闭环,代表着数据的流向,这个DAG的边界则是Action方法的执行 2.如何将DAG切分stage,s ...
- Android Studio的Log日志调试
本人菜鸟一枚,极大发挥了搜索的功能.现记录一番,以备后患. 用断点真的很烦,因为之前写linux的时候,就是用最蠢但是也是挺有帮助的printf()来进行调试. 其实用Log输出日志的原理也是差不多的 ...
- mac上MySQLdb问题解决
早上有个同学问题python访问mysql的问题,之前的写得脚步突然不能运行了,找了很多文章总算解决问题了O(∩_∩)O哈哈~,希望下次不要浪费这么多时间搞这么坑的问题了. mac上MySQLdb ...
- [转]渗透测试tips...零碎的小知识
1.拿到一个待检测的站,你觉得应该先做什么?收集信息whois.网站源IP.旁站.C段网站.服务器系统版本.容器版本.程序版本.数据库类型.二级域名.防火墙.维护者信息另说… 2.mysql的网站注入 ...
- Android开发——View滑动冲突解决方案
0. 前言 我们在Android开发--事件分发机制详解中深入学习了事件分发机制,为我们解决Android开发中的滑动冲突问题做了初步准备.针对滑动冲突这里给出两种解决方案:外部拦截法和内部拦截法 ...
- adb 显示手机分辨率
adb shell dumpsys window | grep "ShownFrame" | head -n 1 adb shell dwm size 当然,作为一个Android ...
- ajax跨域请求_url:http://XXX
利用别的项目提供的一个接口,传入用户名和密码,根据返回的结果判断登陆成功与否. 不经过后台,在js中用ajax实现.对ajax而言,发送跨域请求,与一般写法不同. 如果支持jsonp,则将dataTy ...
- ACE handle_timeout 事件重入
当多线程运行反应器事件时, 注意handle_timeout会重入,单独线程不存在下列问题! 1. 一个timer事件 // test_ace_timer.cpp : Defines the entr ...