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"] 第二种方法使用场景,当属性值是变量时.如图所示:
随机推荐
- Date日期类型的绑定
自定义类型的绑定 springmvc没有提供默认的对日期类型的绑定,需要自定义日期类型的绑定 第一张图是po类中日期属性,第二张图是页面中日期属性的内容,第三张图片是访问出现400错误 因为日期的格式 ...
- 如何在 Apache 里修改 PHP 配置
当使用 PHP 作为 Apache 模块时,也可以使用 Apache 配置文件(例如:httpd.conf) 和 .htaccess 文件中的指令来修改 PHP 的配置 设定,不过需要有 " ...
- ELK6.6.0+filebeat6.6.0部署
elastic不能用root用户去启动,否则会报错,所以创建elastic用户ES集群部署 1.创建elastic用户 $ useradd elastic $ passwd elastic 2..部署 ...
- H5外包团队 MUI文档技术资料大全
HTML5+ API缓存:http://www.dcloud.io/docs/api/zh_cn/cache.html h.js:http://www.hcoder.net/h vue.js:http ...
- 升级node后还是原来版本问题
解决升级node后,已经安装了最新的版本,但是默认的node版本不是最新版本还是当前版本. 最近遇到个错误:The engine node is incompatible with this modu ...
- Vue之添加全局变量
定义全局变量 原理: 设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vue.prototype挂载到vue实例上面或 ...
- ajax请求多次刷新
难道只能设置定时器每隔一秒通过 Ajax 向后台请求数据来实现吗?1.nodejs的 http://socket.io 支持上述 李宏训 所说的三种方式,另外还支持 Flash Socket.隐藏IF ...
- PAT 1136 A Delayed Palindrome
1136 A Delayed Palindrome (20 分) Consider a positive integer N written in standard notation with k ...
- (桥接)完美解决linux设置静态ip。
网上找来找去都是一些隔靴挠痒的操作,这里引自https://blog.csdn.net/yefeng0810/article/details/81150605.感谢大佬的博客.
- angular2学习笔记3
一.项目搭建 二.生成首页的4个tab页面 三.运行部署及配置