问题描述:js获取某元素的属性值为空

代码:

<!-- css定义在head中 -->
<style>
#box{
width: 100px;
height: 100px;
background:#333;
}
</style>
<!-- html+js -->
<body>
<input type="button" value="变色" id="btn">
<div id="box">
</div>
<script>
var oBox=document.querySelector("#box");
alert(oBox.style.width);//啥也没有alert出来
</script>
<body>

问题原因:

style只能获取定义在行间样式的值,这里由于样式是定义在head中,而不是行间,

因此啥也没有alert出来

解决方法:

a).在行间设置元素相关的属性;

b).自定义获取样式的函数getStyle(obj,name),并进行调用即可

function getStyle(obj,name){
if(obj.currentStyle){
//适用IE
return obj.currentStyle[name];
}else{
//适用Chrome,FF
return getComputedStyle(obj,false)[name];
}
}

c).特殊:获取某浮动子元素相对与父元素的left和top值,可以直接用offsetWidth和offsetHeight来获取(注意这两个值都是不带单位的)

js获取元素属性值为空的原因和解决办法的更多相关文章

  1. Js获取元素样式值(getComputedStyle&currentStyle)兼容性解决方案

    因为:style(document.getElementById(id).style.XXX)只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. 一般js获取内部样式和外部样式使用 ...

  2. JS获取元素属性和自定义属性

    获取元素的属性分为两种类型: 1-获取元素常见的属性(class,id,type,value……) 2-获取自定义的元素的属性(data-value,data-mess…….) 获取元素的属性,设置元 ...

  3. JQ获取元素属性值

    最近在学习JAVA Web,自己也是做个下列表左右选择的小案例. 获取某个元素的属性值一直以为是要调用atrr方法,不过好像获取元素的数组形式再遍历每个元素的时候想获取到它的属性值用attr方法有问题 ...

  4. robotframework,移动端(小程序)自动化,获取元素属性值的方法

    如下图,获取商品价格 属性值显示在content-desc内 传统的get text指定是无法获得到这个元素指定属性的值的 只有通过使用AppiumLibrary.get element attrib ...

  5. JS获取元素CSS值的各种方法分析

    先来看一个实例:如何获取一个没有设置大小的字体? <!DOCTYPE html> <html lang="en"> <head> <met ...

  6. JS获取元素属性

    <style> *{ box-sizing: border-box; } html, body { margin: 0px; width: 100%; height: 100%; over ...

  7. JS获取元素CSS值

    一.getComputedStyle getComputedStyle 是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CSSStyleDeclara ...

  8. selenium_webdriver(python)获取元素属性值,浏览器窗口控制、网页前进后退,title/url打印

    <span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-s ...

  9. js获取json属性值的两种方法

    1.json.XXX 2.json["XXX"] 第二种方法使用场景,当属性值是变量时.如图所示:

随机推荐

  1. window上安装kafka(单机)

    1.第一步骤,先安装JDK,请参考:https://www.cnblogs.com/xubao/p/10692861.html 2.第二步骤,安装zookeeper,请参考:https://www.c ...

  2. 如何成为F1车手?

    sorry,玩了几天的GT sport才发现赛车有多难,理论的最佳走线是存在的,但是真实的赛道实在是千变万化,弯道形状角度.高低差.F1还有温度和风速,甚至是路面上的一个碎石都会极大地影响你的成绩.赛 ...

  3. ajax得到后端数据一直提示为[object Object]解决方法

    前段ajax <script type="text/javascript"> function requestJson() { $.ajax({ type : &quo ...

  4. Django细节小记

    前记:Django的ORM.模块有很多函数细节,要学会多看文档学习函数的细节 聚合annotate()和aggregate()的使用 简言之,annotate()得到的是查询集,类似all(),只不过 ...

  5. C语言实验一(3)

    #include<stdio.h> #include<math.h> int main() { float x,y; scanf("%f,%f",& ...

  6. C语言函数声明什么时候可以省略,什么时候不能省?

    在学习C语言函数的时候,老师总会告诉我们函数要写声明,然后再定义.这是个稳健的做法.等我自己学习了其他高级语言以后,回头再来写C,突然就觉得函数要写声明有点麻烦.无意间发现有一次函数没写声明居然编译( ...

  7. PHP json_decode为什么将json字符串转成数组是对象格式?

    eg. $a='[{\"img\":\"/uploads/agency/carimgs/5/15515954778091.jpg\"},{\"img\ ...

  8. arcpy简单示例

    最好在arcmap内置python模块运行. 这里用的是Zonel Stastic as Table模块,计算各个国家的逐月径流量的统计数据.需要对数百个tiff进行计算和导出,使用arcpy可以大大 ...

  9. linux bash array list

    #定义array ptpArray=()while read linedo #将文件读取内容放到array中,注意作为字符串放,否则空格会被分隔成行ptpArray+=("$line&quo ...

  10. eclipse里没有j2ee

    eclipse是客户端开发工具,本来就不带有j2ee的jar包,需要容器:比如tomcat来提供这个jar的.j2EE通用jar包列表:IKIKAnalyzer3.2.8.jar // 分词器ant- ...