问题描述：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. 剑指offer 06：旋转数组的最小数字

    题目描述把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋转 ...

  2. vue的一些随记

    1.vue中在methods等中使用filters中的过滤器 this.$options.filters[filter](...args)

  3. 搭建日志收集系统时使用客户端连接etcd遇到的问题

    问题: 在做日志收集系统时使用到etcd,其中server端在linux上,首先安装第三方包(windows)(安装过程可能会有问题,我遇到的是连接谷歌官网请求超时,如果已经出现下面的两个文件夹并且文 ...

  4. Matlab -- Portfolio

    1.创建空 p = Portfolio; 2.需要了解 均值,方差,协方差实现 X为矩阵 均值 = mean(X): 中位数 = median(X): 方差 = var(X): 标准差 = std(X ...

  5. linux基础命令touch

    touch /home/ceshi    创建文件命令 touch    /home/ceshi1 ceshi2    同时创建两个文件. cat   显示文件内容(短的文件) -n  带行号 tac ...

  6. 字体图标库 IcoMoon IconFont Font Awesome的使用

    在项目开发的过程中,我们会经常用到一些图标.但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多的话,页面加载就越慢.所以,我们可以使用字体图标的方式来显示图标,字体图标任意放大缩小不会失 ...

  7. 杨力第一次jjave作业

    感觉jave学起来比c语言难一点,格式要求较高,有更多的东西要记,但是只要认真学应该不是很难,自己应该多写程序.

  8. JAVA语言之怎样写出高性能的Java代码？

    本文主要向大家介绍了JAVA语言之怎样写出高性能的 Java 代码?通过具体的内容向大家展示,希望对大家学习JAVA语言有所帮助. 在这篇文章中,我们将讨论几个有助于提升Java应用程序性能的方法.我 ...

  9. linux下用户操作

    在linux中添加ftp用,并设置相应的权限,操作步骤如下: 1.环境:ftp为vsftp.被限制用户名为test.被限制路径为/home/test. 2.建用户:在root用户下: useradd  ...

  10. linux服务器用nginx做网站内页之间301的跳转方法

    例: 要将这个页面 /topic/show-228-1.html 做301跳转到 /dance/topic-show-228-1.html nginx的伪静态规则就这样写: rewrite ^/top ...