文档章节

js获取非行间样式

我输过但从未怕过
 我输过但从未怕过
发布于 2016/05/17 17:48
字数 872
阅读 38
收藏 1

我们都知道js获取行间样式的方法,那么js是如何获取行距样式的呢?

首先让我们看一下js是如何获取行间样式的:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>获取行间样式</title>
   <script>
   window.onload=function ()
   {
   	var oDiv=document.getElementById("div1");
   	alert(oDiv.style.width);
   }
   </script>
   </head>
   
   <body>
   <div id="div1" style="width:200px; height:200px; background:red;"></div>
   </body>
   </html>

大家运行代码可以看到我们这样就获取到了div的行间样式的宽度为200px,那么如果我们现在写的不是行间样式还能获取到div的样式吗?我们把上面的代码变一下,代码如下:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>获取行间样式</title>
   <style>
   #div{width:200px; height:200px; background:red;}
   </style>
   <script>
   window.onload=function ()
   {
   	var oDiv=document.getElementById("div1");
   	alert(oDiv.style.width);
   }
   </script>
   </head>
   
   <body>
   <div id="div1"></div>
   </body>
   </html>

我们运行代码可以看到在这种情况下我们是无法获取到div的宽度属性值了,如果我们想要在现在的情况下获取到div的宽度属性值,我们又应该怎么操作呢?解决方案:引入currentStyle;我们把上面的代码改一下,代码如下:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>获取非行间样式</title>
   <style>
   #div1{width:200px; height:200px; background:red;}
   </style>
   <script>
   window.onload=function ()
   {
   	var oDiv=document.getElementById("div1");
   	alert(oDiv.currentStyle.width);
   }
   </script>
   </head>
   
   <body>
   <div id="div1"></div>
   </body>
   </html>

我们在运行代码,OK,IE里面现在是没问题,证明上面的代码很好用,但是当我们用FF浏览器打开的时候,页面出问题了,在这儿补充一点:但凡是好用的代码99%以上不兼容,那么我们怎么办?解决方案:引入getComputedStyle;getComputedStyle(oDiv, false).width;第一个参数要获取物体的样式,第二个暂时没发现有什么用处,可以随便放;我们把上面代码修改一下,代码如下:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>获取非行间样式</title>
   <style>
   #div1{width:200px; height:200px; background:red;}
   </style>
   <script>
   window.onload=function ()
   {
   	var oDiv=document.getElementById("div1");
   	alert(oDiv.getComputedStyle(oDiv, false).width);
   }
   </script>
   </head>
   
   <body>
   <div id="div1"></div>
   </body>
</html>

我们运行代码可以看到FF已经没问题,但是接下来看我的IE浏览器,又出现问题,说明咱们用的这两个方法都是不兼容的,所以我们要找到一种解决办法,让所有的浏览器都要兼容。我们再把上面的代码做一下修改,代码如下:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获取行间样式</title>
<style type="text/css">
#div1{width:100px; height:100px; background:red;}
</style>
<script type="text/javascript">
function getStyle(obj, attr)
{
 if(obj.currentStyle)
 {
 return obj.currentStyle[attr];
 }
 else
 {
 return getComputedStyle(obj,false)[attr];
 }
}
window.onload=function()
{
 var oDiv=document.getElementById('div1');
 alert(getStyle(oDiv,'width'))
}
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

好的,现在我们再运行代码试一下,IE、FF都没有问题了,当然你也可以测试更多浏览器,完全是没问题。到此咱们就可以完美的获取到div的非行间样式了。

本文转载自:http://www.webclks.com/archives/918

我输过但从未怕过
粉丝 1
博文 40
码字总数 6706
作品 0
朝阳
私信 提问
javascript中获取非行间样式的方法

在编写程序的时候我们往往有时候需要获取一下样式表里的某个值,或某个属性。而通常我们的样式是写在css的文件里的,那我们该怎么来去获取呢?我们又为什么要用这种方法呢?下面就来段代码比...

菜鸟的进阶
2017/10/22
8
0
前端学习笔记(二)——css样式

CSS选择器 作用:选择对应的元素 语法:选择器名后跟{},{}里面写对应的样式名与样式值.{样式名:样式值;样式名:样式值;...} 1、元素选择器——会选择html文档里素有与选择器名相同的元素 2、群...

逗比心
01/07
0
0
前端学习(三)javascript(*)

三、DOM应用 1、dom基础 (1)dom 节点: 父节点的获取:parentNode、offsetParent(获取有定位的父节点); 子节点的获取:childNodes和nodeType(也可以用children); 首尾子节点:first...

stanwuc
2018/12/12
0
0
原生JS获取HTML样式并修改

大家都知道在JavaScript原生操作中获取元素的样式,在实际操作是使用时比较频繁的一件事,这里像大家介绍下获取css样式的方法,希望可以帮助一些需要的人,如果有幸被大牛看到,有更好的办法...

IDC_之家
2017/02/12
0
0
JQuery中操作Css样式的方法

获取和设置样式 追加样式 移除样式 切换类名 判断是否含有某项样式 获取css样式中的样式 设置单个样式 设置多个样式 offset()方法 它的作用是获取元素在当前视窗的相对偏移,其中返回对象包含...

Bery
2017/10/20
19
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql-connector-java升级到8.0后保存时间到数据库出现了时差

在一个新项目中用到了新版的mysql jdbc 驱动 <dependency>     <groupId>mysql</groupId>     <artifactId>mysql-connector-java</artifactId>     <version>8.0.18</version> ......

ValSong
今天
5
0
Spring Boot 如何部署到 Linux 中的服务

打包完成后的 Spring Boot 程序如何部署到 Linux 上的服务? 你可以参考官方的有关部署 Spring Boot 为 Linux 服务的文档。 文档链接如下: https://docs.ossez.com/spring-boot-docs/docs/r...

honeymoose
今天
6
0
Spring Boot 2 实战:使用 Spring Boot Admin 监控你的应用

1. 前言 生产上对 Web 应用 的监控是十分必要的。我们可以近乎实时来对应用的健康、性能等其他指标进行监控来及时应对一些突发情况。避免一些故障的发生。对于 Spring Boot 应用来说我们可以...

码农小胖哥
今天
8
0
ZetCode 教程翻译计划正式启动 | ApacheCN

原文:ZetCode 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 ApacheCN 学习资源 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 ...

ApacheCN_飞龙
今天
5
0
CSS定位

CSS定位 relative相对定位 absolute绝对定位 fixed和sticky及zIndex relative相对定位 position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则...

studywin
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部