js获取元素属性值为空的原因和解决办法
问题描述：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获取元素属性值为空的原因和解决办法的更多相关文章
- Js获取元素样式值(getComputedStyle¤tStyle)兼容性解决方案
因为:style(document.getElementById(id).style.XXX)只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. 一般js获取内部样式和外部样式使用 ...
- JS获取元素属性和自定义属性
获取元素的属性分为两种类型: 1-获取元素常见的属性(class,id,type,value……) 2-获取自定义的元素的属性(data-value,data-mess…….) 获取元素的属性,设置元 ...
- JQ获取元素属性值
最近在学习JAVA Web,自己也是做个下列表左右选择的小案例. 获取某个元素的属性值一直以为是要调用atrr方法,不过好像获取元素的数组形式再遍历每个元素的时候想获取到它的属性值用attr方法有问题 ...
- robotframework，移动端（小程序）自动化，获取元素属性值的方法
如下图,获取商品价格 属性值显示在content-desc内 传统的get text指定是无法获得到这个元素指定属性的值的 只有通过使用AppiumLibrary.get element attrib ...
- JS获取元素CSS值的各种方法分析
先来看一个实例:如何获取一个没有设置大小的字体? <!DOCTYPE html> <html lang="en"> <head> <met ...
- JS获取元素属性
<style> *{ box-sizing: border-box; } html, body { margin: 0px; width: 100%; height: 100%; over ...
- JS获取元素CSS值
一.getComputedStyle getComputedStyle 是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CSSStyleDeclara ...
- selenium_webdriver(python)获取元素属性值，浏览器窗口控制、网页前进后退，title/url打印
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-s ...
- js获取json属性值的两种方法
1.json.XXX 2.json["XXX"] 第二种方法使用场景,当属性值是变量时.如图所示:
随机推荐
- luogu准备复习(学习)题单
矩阵乘法 P1306 exbsgs P4195 网络流(割点) P1345 主席树 P3302
- PHP curl Post请求和Get请求~
//获取的参数 $api_key = '8a82d53a57b06c1d835d129f7e43d49c'; $orderNum = pdo_fetch('select ddlm_order_no f ...
- 【安卓进阶】LiveData
最近参与到后端的工作中,虽然以前在工作中使用过PHP,但是这次使用的是Java,开发思路和方式有所不同.后端开发中,做接口也是需要处理大量的业务逻辑关系,同时一些事务之类的技术因素也要考虑好,在架设项 ...
- Centos7 防火墙frewalld规则设置
配置firewalld-cmd 查看版本: firewall-cmd --version 查看帮助: firewall-cmd --help 显示状态: firewall-cmd --state 查看 ...
- 另类AOP设计
常见的AOP设计都基于Remoting的RealProxy,或者基于Emit实现的动态代理,或者基于反射的Attribute扫描拦截.但是我们还有另类的拦截方案DynamicObject,只要我们继承 ...
- 初识Log4Net
刚刚了解log4net,根据自己的理解翻译了一下比较重要的东西.详细状况请见log4net官方网站 log4net是一种帮助程序员将日志语句输出到各种目标文件的输出工具,有了log4net,就可以在运 ...
- 微信小程序开发和h5的区别
1. 开发小程序时,每个页面一定要在app.json文件中注册,页面文件夹和其包含的四个文件的名字要保持一致. 2. 小程序发起的都是HTTPS网络请求,在开发调试的过程中可以不校验协议和TLS版本, ...
- 【转】PO/POJO/BO/DTO/VO的区别
PO :persistent object持久对象 1 ．有时也被称为Data对象,对应数据库中的entity,可以简单认为一个PO对应数据库中的一条记录. 2 ．在hibernate持久化框架中 ...
- HATEOAS约束
HATEOAS(Hypermedia as the engine of application state)是 REST 架构风格中最复杂的约束,也是构建成熟 REST 服务的核心.它的重要性在于打破 ...
- 3.4 自动测试初步《精通ASP.NET MVC 5》
概述 ASP.NET MVC 框架已被设计成易于建立自动测试,并易于采用诸如测试驱动开发(TDD)等的开发方法学.ASP.NET MVC 为自动化测试提供了一个理想平台. 从广义上讲,当今的 Web ...