JavaScript 学习—— js获取行间样式和非行间样式
1. 问题引入
<head>
<style>
#div1{
width:150px;
height:200px;
position:absolute;
left:-150px;
background: green;
}
</style>
<script>
window.onload = function(){
var oDiv1 = document.getElementById('div1');
alert(oDiv1.style.left); //获取left属性的值
}
</script>
</head> <body>
<div id="div1"></div>
</body>
上面代码的意思是想要获取得到id="div1"元素的left属性值。但是当我们运行上面代码的时候就会发现，弹窗弹出的内容确实什么都没有。
我们明明在<style></style>标签内定义了该元素的left属性，为什么alert(oDiv.style.left);确实返回一个什么都没有的弹窗呢？
其实，这个问题的原因是：oDiv1.style.left这样的格式来获取的left是非行间样式的left。
2. 什么是非行间样式？
非行间样式就是指不是写在标签体内的style属性的样式。如上面的代码中<style>....</style>内的定义的样式都是非行间样式。
3. 那什么是行间样式？
行间样式就是写在标签体内的样式：如，<div style="left:100px">，在这里left样式就是行间样式。
4. 那我们该如何获取行间样式呢？
要获取行间样式我们可以这样操作：
低版本ie浏览器下使用oDiv1.currentStyle.left;进行获取非行间样式。
其它浏览器下使用var style = window.getComputedStyle(oDiv1,null); //第二个参数直接传入null就行，没什么作用的。
alert(style.left); //便可以返回行间样式的left属性值
5. 整合在一起，兼容所有浏览器的代码：
window.onload = function(){
var oDiv1 = document.getElementById('div1');
if(oDiv1.currentStyle){
alert(oDiv1.currentStyle.left);
}else{
alert(getComputedStyle(oDiv1,null).left);
}
}
JavaScript 学习—— js获取行间样式和非行间样式的更多相关文章
- javascript获取行间样式和非行间样式--兼容写法
style:获取行间样式: currentStyle:获取计算后的样式,也叫当前样式.最终样式. 优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到.注意 ...
- JS获取非行间样式
我们都知道用offset函数获取元素样式是一件很方便的事,但是offset只能获取行间样式,而无法获得非行间样式,这是它的瓶颈所在. 我们都知道js获取行间样式的方法,那么js是如何获取行距样式的呢? ...
- js和jquery中获取非行间样式
样式又分为了行间样式和非行间样式.一般来说行间样式用的是比较少的,因为它能够作用的范围就只有一个元素,而非行间样式的作用范围可以是一类元素(即拥有相同德标签,或者说是有相同的类名,(当然id名不可能相 ...
- js获取非行间样式/写入样式（行间）
<!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...
- javascript中获取非行间样式的方法
我们都知道一般在javascript中获取样式一般用的是nodeObj.style.attr这个属性的,但是这个属性只能获取行间样式非行间样式比如写在样式表中的样式那么用nodeObj.style.a ...
- JavaScript获取非行间样式/定义样式
html节点的样式分为以下几种 (1)浏览器默认样式 (2)引用样式(引用外部css文件的样式.style标签内定义的样式) 引用外部css样式:<link rel="styleshe ...
- js获取非行间样式/定义样式
<!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...
- js获取非行间样式或定义样式
<!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...
- js用currentStyle和getComputedStyle获取css样式（非行间） 兼容ie与火狐
用js的style属性可以获得html标签的样式,但是不能获取非行间样式.那么怎么用js获取css的非行间样式呢?在IE下可以用currentStyle,而在火狐下面我们需要用到getComputed ...
随机推荐
- sqlserver 字符串最后一次的位置，截取字符串
--reverse:字符串倒排 SUBSTRING(字段,1,len(字段)- CHARINDEX('-',REVERSE(字段)))
- 使用jQuery开发一个带有密码强度检验的超酷注册页面
在今天的jQuery教程中,我们将介绍如何使用jQuery和其它相关的插件来生成一个漂亮的带有密码强度检验的注册页面,希望大家喜欢! 相关的插件和类库 complexify - 一个密码强度检验jQu ...
- android html 与webview属性从冲突
在最近的项目开发中,使用webview加载html页面,这样可以节省大量页面开发的时间,同时也可加快项目进度. 我们需求是需要显示商品评论,页面设计如下: 调用android代码,对于webview的 ...
- tengine + mysql + nginx + php
tengine + mysql + nginx + php 1.配置防火墙vim /etc/sysconfig/iptables # 允许80端口通过防火墙-A INPUT -m state --st ...
- [转]GeoHash核心原理解析
原文出处: zhanlijun 引子 机机是个好动又好学的孩子,平日里就喜欢拿着手机地图点点按按来查询一些好玩的东西.某一天机机到北海公园游玩,肚肚饿了,于是乎打开手机地图,搜索北海公园附近的餐 ...
- struts2完全捕获404错误的方法
目前在做一个网络应用程序,struts2 + spring + hibernate,服务器是tomcat.希望用户在IE地址栏乱敲的时候,所敲入的所有未定义的URL都能被程序捕捉到,然后转到一个自制的 ...
- java攻城师之路--复习java web之jsp入门_El表达式_JSTL标签库
JSP 技术掌握:JSP语法 + EL + JSTL 为什么sun推出 JSP技术 ? Servlet 生成网页比较复杂,本身不支持HTML语法,html代码需要通过response输出流输出,JSP ...
- 怎样设置一个DIV在所有层的最上层，最上层DIV
怎样设置一个DIV在所有层的最上层,最上层DIV,其实很简单,只需要在这个DIV上使用这个样式即可,z-index:99999
- 在JAVA和android中常用的单列模式
在很多开发中,项目为了节约资源,都把一个类的构造函数变为私有化,这样整个项目中就不能创建多个实例,这样的方法我们称为单例模式 现在通过代码来简介下这个单例模式: 在新建一个java项目后,创建一个实体 ...
- Marvel – 将图像和源文件转换成互动，共享的原型
Marvel 是一款非常简单的工具,将图像和设计源文件转换成互动,共享的原型,无需任何编码.原型可以通过点击几下鼠标就创建出来,能工作在任何设备上的浏览器,包括移动设备,台式机.Marvel 的一个特 ...