问题描述：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. Java语言中的奇淫技巧

    variable length parameter list(可变长度参数列表) 很久之前了解过有这么一种写法,但转眼即忘.今天在公司项目的代码里看到,有点小惊讶,写这代码的同事还是有点水平的...

  2. php（三）使用thinkphp操作数据库

    1.数据库设置 在项目D:\workspaces\phpDemo01\helloworldProject\Common\Conf\config.php配置: <?php return array ...

  3. 初学Git命令

    初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 使用命令git add <file>,注意,可反复多次使用,添加多个文件: 使用命令git commit ...

  4. round函数解决oracle报错"OCI-22053: 溢出错误"的问题

    继上次公司网站报错除数为0的问题,这次又来报错溢出错误,还是同一条语句!搜索网上的解决方法,发现问题描述和解决方法如下: Oracle 数值数据类型最多可存储 38 个字节的精度.当将 Oracle ...

  5. Jan.09

    [10个可爱又迷人的加分俚语]1. Be in the air 将要发生的事情2. Clear the air 消除误会3. Cost an arm and a leg 极其昂贵4. A bad eg ...

  6. 查看linux服务器上Tensorflow的版本和位置

    查看tensorflow版本,可以在终端输入查询命令如下: python import tensorflow as tf tf.__version__ 查询tensorflow安装路径为: tf.__ ...

  7. REST（Representational state transfer）的四个级别以及HATEOAS介绍

    Rest RES(Representational state transfer):表现层状态转移.其实它省略了主语,「表现层」其实指的是「资源」的「表现层」,所以通俗来讲就是:资源在网络中以某种表现 ...

  8. python编程学习--Pygame - Python游戏编程入门(0)---转载

    原文地址:https://www.cnblogs.com/wuzhanpeng/p/4261015.html 引言 博客刚开,想把最近学习的东西记录下来,算是一种笔记.最近打算开始学习Python,因 ...

  9. Win10系列：C#应用控件进阶5

    多线形 多线形和多边形类似,不同点在于多线形中最后一个点和第一个点不会默认被连接.在多线形的点集中,可以存在同一个开始点和终结点因而会定义成闭合图形.下面将演示如何使用Polyline控件绘制一个多线 ...

  10. java多线程高并发知识总结

    1.      计算机系统 使用高速缓存来作为内存与处理器之间的缓冲,将运算需要用到的数据复制到缓存中,让计算能快速进行:当运算结束后再从缓存同步回内存之中,这样处理器就无需等待缓慢的内存读写了. 缓 ...