元素未显示设置width/height时IE中使用currentStyle获取为auto

我们知道获取元素的实际宽高在IE中可以使用currentStyle属性。但如果没有显示的去设置元素的宽高，那么使用该属性将获取不到，获取的值为auto。如下


代码如下:

<div>abcd</div>
<script>
var div = document.getElementsByTagName('div')[0];
alert(div.currentStyle.width);
alert(div.currentStyle.height);
</script>

IE6/7/8/9中输出的都是auto。如果显示的设置了宽高，那么输出的就是实际宽高。如下

1，通过内联style属性设置


代码如下:

<div style="width:100px;height:50px;">abcd</div>
<script>
var div = document.getElementsByTagName('div')[0];
alert(div.currentStyle.width);
alert(div.currentStyle.height);
</script>

2，通过页面嵌入style标签设置


代码如下:

<style>
div {
width: 100px;
height: 50px;
}
</style>
<div>abcd</div>
<script>
var div = document.getElementsByTagName('div')[0];
alert(div.currentStyle.width);
alert(div.currentStyle.height);
</script>

都将输出：100px，50px

赞 (0)

相关推荐

  • 前端学习笔记style，currentStyle，getComputedStyle的用法与区别

    前端学习笔记style，currentStyle，getComputedStyle的用法与区别

    style.currentStyle.getComputedStyle区别介绍 样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对所在的网页有效. 外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styl

  • 获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)

    可是DOM.style这种写法只能访问<DOM style=""></DOM>,这样在标签里内置的样式,如果样式写在<style type="text/css"></style>,或者.css文件里,那么就办法读到样式了. 其实呢,还有别的方法可以读到这些样式信息,方法有两种,一种是通过document.styleSheets对象,另一种是通过"最终样式"对象.其中 IE中这个对象叫做current

  • javascript 读取内联之外的样式(style、currentStyle、getComputedStyle区别介绍)

    样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式(internal Style Sheet):是写在HTML的<head></head>里面的,内部样式只对所在的网页有效. 外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件. 下面

  • style、 currentStyle、 runtimeStyle区别分析

    1.obj.style只能获得内嵌样式(inline Style)就是写在Tag里面的,他访问不到那些链接的外部css和在head中用<style>声明的style. 所以必须认识到在那些使用外部Css文件的页面中,如果用style赋值,如obj.style="color:red";显然效果是正确的,其中的奥秘确是只是在该对象的tag上多添加了一个style属性,按照由小到大的优先级呈现罢了. 2.obj.currentStyle就强大多了,他能够获取关于这个节点所有位置的

  • JS获取CSS样式（style/getComputedStyle/currentStyle）

    CSS的样式分为三类: 内嵌样式:是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式:是写在HTML的里面的,内部样式只对所在的网页有效. 外部样式表:如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这 些样式(Styles)的网页里引用这个CSS文件. getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式对象([object CSSStyleDeclar

  • (currentStyle)javascript为何有时用style得不到已设定的CSS的属性

    这是按第2下兰色的横条才开始出效果,就是说第1下没有获得foot.style.display=="none",可是CSS里我定义了 <style type="text/css"> #top {width:100px; background-color:#00CCFF; height:20px} #foot {width:100px; background-color: #CCCC00; height:50px; display:none} </st

  • getComputedStyle与currentStyle获取样式(style/class)

    大家都知道,用document.getElementById('element').style.xxx可以获取元素的样式信息,可是它获取的只是DOM元素style属性里的样式规则,对于通过class属性引用的外部样式表,就拿不到我们要的信息了. DOM标准里有个全局方法getComputedStyle,可以获取到当前对象样式规则信息,如:getComputedStyle(obj,null).paddingLeft,就能获取到对象的左内边距.但是事情还没完,万恶的IE不支持此方法,它有自己的一个实

  • 通用于ie和firefox的函数 GetCurrentStyle (obj, prop)

    function GetCurrentStyle (obj, prop) { if (obj.currentStyle) { return obj.currentStyle[prop]; } else if (window.getComputedStyle) { prop = prop.replace (/([A-Z])/g, "-$1"); prop = prop.toLowerCase (); return window.getComputedStyle (obj, "&

  • 元素未显示设置width/height时IE中使用currentStyle获取为auto

    我们知道获取元素的实际宽高在IE中可以使用currentStyle属性.但如果没有显示的去设置元素的宽高,那么使用该属性将获取不到,获取的值为auto.如下 复制代码 代码如下: <div>abcd</div> <script> var div = document.getElementsByTagName('div')[0]; alert(div.currentStyle.width); alert(div.currentStyle.height); </scr

  • IE6/7/8中Option元素未设value时Select将获取空字符串

    如下 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <title>IE6/7/8中Option元素未设value时Select将获取空字符串</title> </head> <body> <select onchange="alert(this.value)"> <option>one</option> <option>

  • Python中Dataframe元素为不定长list时的拆分分组

    目录 引言 解决方法 总结 引言 本文想要解决的问题是当DataFrame中某一列元素为不定长度的数组时,该如何对它们进行拆分分解为后续元素,从而进行进一步的提取操作,数据格式见下图: 解决方法  这个问题的解决思路首先是要不定长的数组填充成等长的数组,从而后续可以直接转换为元素为单一值的标准DataFrame,再和原DataFrame合并即可完成操作.填充的部分使用了map()方法来实现,实现前还需要获得数组的最大长度以确定填充数目.代码见下: a=[[['a','d'],['b'],['a'

  • pandas.dataframe中根据条件获取元素所在的位置方法(索引)

    在dataframe中根据一定的条件,得到符合要求的某行元素所在的位置. 代码如下所示: df = pd.DataFrame({'BoolCol': [1, 2, 3, 3, 4],'attr': [22, 33, 22, 44, 66]}, index=[10,20,30,40,50]) print(df) a = df[(df.BoolCol==3)&(df.attr==22)].index.tolist() print(a) df如下所示,以上通过选取"BoolCol"取

  • Visual Studio Code运行程序时输出中文成乱码问题及解决方法

    今天写代码,需要输出一些中文,于是就顺势发现了这个问题:VS Code输出中文成乱码.上网查询了一番后,我找到了解决方法,我决定将我看到的方法整理出来,帮助更多朋友.(windows10系统下) 1. 打开控制面板 可以点击电脑桌面上的相应图标打开 也可以点击桌面左下角开始按钮,找到W开头文件列表下的windows系统文件夹中的控制面板 2.选择时钟和区域下的更改日期.时间或数字格式 3.点击管理,然后点选择更改系统区域设置 4. 勾选Beta版:使用Unicode UTF-8提供全球语言支持,

  • 新建文件时Pycharm中自动设置头部模板信息的方法

    前言 pycharm默认是没有为我们设置模板信息的,但为了更加方便的实现代码管理,以及能够一目了然的查看到我们是什么时候写的代码,个人觉得增加一个模板信息还是很有必要的. 实现方法 依次点击 File | Settings | Editor | File and Code Templates, 然后选中python Script,在右边的输入框中填入你想要设计的模板信息即可.下面是图形实例 编辑内容 pycharm中设置了许多相应的模板信息,可以根据需要写入 $ {YEAR} #当年 $ {MO

  • 关于MyBatis 查询数据时属性中多对一的问题(多条数据对应一条数据)

    数据准备 数据表 CREATE TABLE `teacher`( id INT(10) NOT NULL, `name` VARCHAR(30) DEFAULT NULL, PRIMARY KEY (id) ) ENGINE=INNODB DEFAULT CHARSET=utf8; INSERT INTO `teacher`(id,`name`) VALUES(1,'大师'); CREATE TABLE `student`( id INT(10) NOT NULL, `name` VARCHAR

  • 一文详解Vue3中使用ref获取元素节点

    目录 静态绑定 onMounted nextTick watchEffect watch v-for中使用 动态绑定 ref设置函数 通过getCurrentInstance方法 获取vue实例 前言: 本文介绍在vue3的setup中使用composition API获取元素节点的几种方法: 静态绑定 仅仅需要申明一个ref的引用,用来保存元素,在template中,不必bind引用(:ref="domRef"),只需要声明一个同名的ref属性(ref="domRef&qu

  • vue3中的对象时为proxy对象如何获取值(两种方式)

    目录 第一种获取target值的方式: 第二种获取target值 PS:vue3中获取proxy包裹的数据 前言 一.具体问题 二.解决办法 使用vue3.0时,因为底层是使用proxy进行代理的所以当我们打印一些值得时候是proxy代理之后的是Proxy对象,Proxy对象里边的[[Target]]才是真实的对象. 第一种获取target值的方式: 通过vue中的响应式对象可使用 toRaw() 方法获取原始对象 //第一种获取target值的方式,通过vue中的响应式对象可使用toRaw()

  • easyui中combotree循环获取父节点至根节点并输出路径实现方法

    前台页面: <pre name="code" class="html"><td style="height: 35px" colspan="7"> <input id="fm_AEType" class="easyui-combotree" style="width: 240px" /> <label id="fm_

随机推荐