问题描述：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. 【python 3】 函数 初识

    函数初识 1.函数的定义.调用.返回值 函数的定义.调用.返回值 def demo(): ## 定义函数 (def + 空格 + 函数名 + () + 冒号) ## 如下为函数体 return a # ...

  2. Ajax+setInterval定时异步刷新页面

    这个是之前一个项目中用到的功能,现在记录一下他的使用步骤. 现在讲解一下具体的关键代码: 1.   window.onload:是指等待页面html和css都执行完毕以后才开始执行js文件,因为我这个 ...

  3. GT sport真实赛道详解 - Brands Hatch | 伯蘭士赫治GP賽車場

    参考:GT sport所有赛道简介 GT Sport - Tip/Guide For FASTER LAP TIMES (Brands Hatch) 赛道介绍.跑法.赛事网上都有大把的视频. GT s ...

  4. Python字符串 --Python3

    Python语言中,字符串是用两个双引号或者单引号括起来的词汇表或多个字符. 1.Python字符串的两种序号体系 反向递减序号:-- -9 -8 -7 -6 -5 -4 -3 -2 -1 正向递增序 ...

  5. 20190321xlVBA_明细信息表汇总成数据表

    刚开始能把代码敲得行云流水的时候,写代码是种乐趣.有了功利目的之后,重复的工作写多几次,厌烦的情绪四处弥漫. 去年八月份正好写了一回,还能支持控件,在此备忘. Public Sub Informati ...

  6. mpvue开发项目总结(从0到上线)

    1.简言 为期一个半月的小程序开发,其中夹杂其他项目的功能迭代,跌跌撞撞的将项目完成了,今天中秋节放假前一天,以此来记录下此次打怪升级的心得与分享其中遇到花费时间的问题. 因为此次开发的是一个类电商项 ...

  7. jQuery的版本兼容问题

    之前在做头像上传的时候,使用的jQuery是1.8.2的版本,然后头像上传做完后,发现项目用的jQuery版本是3.3.1的.由于两个版本的差距太大了.所以兼容很差. 3.3.1不支持剪切头像的某些函 ...

  8. XAMPP启动Apache时发生ERROR

    XAMPP(Apache+MySQL+PHP+PERL)是一个功能强大的建站集成软件包,是一个易于安装且包含 MySQL.PHP 和 Perl 的 Apache 发行版.XAMPP 的确非常容易安装和 ...

  9. javascript高级

    数组及操作方法 数组就是一组数据的集合,javascript中,数组里面的数据可以是不同类型的. 定义数组的方法 //对象的实例创建 var aList = new Array(1,2,3); //直 ...

  10. springBoot 随笔(二)

    此文为springBoot 结合 thymeleaf ,解析后台接口数据展示到html页面 基于 springBoot(一)工程. 1/ 引用 thymeleaf 组件依赖 <!-- depen ...