问题描述: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# Finalize和Dispose的区别

    一:总结 1.Finalize方法(C#中是析构函数,以下称析构函数)是用于释放非托管资源的,而托管资源会由GC自动回收.所以,我们也可以这样来区分 托管和非托管资源.所有会由GC自动回收的资源,就是 ...

  2. React点击操作自动定位到另外一个元素

    使用Ref 方式一 使用ScrollIntoView方法 import React from 'react' export default class ScrollToElement extends ...

  3. C# 如何获取可执行文件路径的上上级目录

    1. DirectoryInfo di = new DirectoryInfo(string.Format(@"{0}..\..\", Application.StartupPat ...

  4. T2027 蜈蚣

    传送门 思路: 设 f[ i ][ j ] 为第 i 节,切到第 j 段的最大恶心值. 枚举 左端点 j ,右端点 i ,段数 k →  转移: f [ i ][ k ] = max ( f [ i ...

  5. python高阶函数(Map、Reduce、Filter、lamba)

    Map函数 map()函数接收两个参数,一个是函数,一个是序列,map将传入的函数依次作用到序列的每个元素,并把结果作为新的list返回. 代码如下: >>> def f(x): . ...

  6. 提升 Hive Query 执行效率 - Hive LLAP

    从 Hive 刚推出到现在,得益于社区对它的不断贡献,使得 Hive执行 query 效率显著提升.其中比较有代表性的功能如 Tez (将多个 job整合为一个DAG job)以及 CBO(Cost- ...

  7. JSON的新方法--parse()和stringify()

    // eval 可以解析任何字符串变成js var str = 'function show() {console.log(1)}'; eval(str); show(); // parse 只能解析 ...

  8. ionic2启动出现try again later

    新建IONIC2的项目时,启动只出现try again later 这个问题应该是安装依赖出现的,重装npm install 一次就可以了

  9. 用oracle自带的ssh脚本配置互信

    ./sshUserSetup.sh -user 用户名 -hosts "主机名1 主机名2 主机名3 ..." -advanced -noPromptPassphrase   这个 ...

  10. Azkaban启动web--javax.net.ssl.SSLException: Unrecognized SSL message, plaintext connection? at sun.se

    javax.net.ssl.SSLException: Unrecognized SSL message, plaintext connection? at sun.se javax.net.ssl. ...