问题描述：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. C语言: 简易图书管理系统

    这只是一个简易的图书管理系统,虽然它有千余行代码,不过终究是个简单基本的东西. 在Linux系统下,用Vim编写,如要在Windows上运行则需要一些改动,主要是一些调用系统函数的改动.如Window ...

  2. pycharm的pip安装问题，需要确认适合IDE的pip版本

    python 报错     AttributeError: module 'importlib._bootstrap' has no attribute 'SourceFileLoader' 解决方法 ...

  3. 线程（Thread，ThreadPool）、Task、Parallel

    线程(Thread.ThreadPool) 线程的定义我想大家都有所了解,这里我就不再复述了.我这里主要介绍.NET Framework中的线程(Thread.ThreadPool). .NET Fr ...

  4. 用Python实现简单通讯录

    一个简单的通讯录例子 #!/usr/bin/python __author__ = 'fierce' #coding:utf-8 import os #引用os模块 import pickle #应用 ...

  5. 实验五 <FBG>团队亮相

    一.队名:FBG 二.队员: 201571030321:马玉婷 (小队长) 201571030317:马美玲 201571030331:益西卓嘎 三.队员风采: 201571030321:马玉婷 风格 ...

  6. 如何查看linux服务器内存使用情况

    1. free命令 free 命令显示系统使用和空闲的内存情况,包括物理内存.交互区内存(swap)和内核缓冲区内存. 直接输入free命令,显示如下   free命令默认是显示单位kb,可以采用fr ...

  7. Netty官网首页（翻译）

    官网:https://netty.io/ Netty是一个异步事件驱动的网络应用程序框架,用于快速开发可维护的高性能协议服务器和客户端. Netty是一个NIO客户端服务器框架,可以快速轻松地开发协议 ...

  8. 解决Git Revert操作后再次Merge代码被冲掉的问题

    转:https://blog.csdn.net/paul_wei2008/article/details/77477932 https://blog.csdn.net/cxn945/article/d ...

  9. Analysis servlet

    @WebServlet("/cdiservlet") public class NewServlet extends HttpServlet { private Message m ...

  10. SecureCRT常见配置

    不自动断开连接 颜色设置 然后再在/etc/bash.bashrc中加入这句话alias ls='ls --color',其实意思就是以后所有的ls命令,就是ls –color命令