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"] 第二种方法使用场景,当属性值是变量时.如图所示:
随机推荐
- Fiddler抓取HTTPS请求配置
由于fiddler安装后默认只能抓取http请求,如果需要抓取https请求需要进行配置.配置方式:Tools--->Options--->HTTPS,勾选CaptureHTTPS CON ...
- React Native图片缓存解决方案
1. react-native-fetch-blob 将图片存在本地的一个东西 2. react-native-img-cache 自动缓存的一个东西 上面装好后 就可以使用啦 import {Cac ...
- T55359 家庭作业
传送门 思路: 先按学分从大到小排序,根据贪心的思想尽可能地让作业的完成时间延后,这样就能有更多空间给那些限制比较严格的作业 设 f [ i ] 为点 i 向左的最小空闲时间 对于一个限制 t 的作业 ...
- VirtualBox中CentOS7.2 网络配置（固定IP+联网）
一.前言 用虚拟机装Linux系统时,经常会出现一些问题.比如:从主机到虚拟机之间网络不通:虚拟机中无法联网:虚拟机中的IP地址不固定.为了解决这些问题,我曾花了不少时间.在此,记下填坑方法. 二.环 ...
- Ansible 脚本运行一次后，再次运行时出现报错情况，原因：ansible script 的格式不对，应改成Unix编码
Ansible 脚本运行一次后,再次运行时出现报错情况,原因:ansible script 的格式不对,应改成Unix编码 find . -name "*" | xargs do ...
- python日志模块的使用
学习一下python的日志模块logging,可以参考如下博客,写得很详细 https://www.cnblogs.com/yyds/p/6901864.html https://www.cnblog ...
- 浅谈前端nuxt（ssr）
SSR: 服务端渲染(Server Side Render),即:网页是通过服务端渲染生成后输出给客户端. 一.那为什么要使用SSR呢? 我用一句话理解的就是降低SPA(Single Page App ...
- 怎样使用md命令一次建立多级子目录
https://jingyan.baidu.com/article/37bce2be30cae21002f3a224.html 点击开始,运行,在运行窗口中输入“cmd”. 打开cmd窗口之后,用 ...
- vue-cli3.0怎么修改端口?
在根目录新建 vue.config.js 文件 module.exports = { devServer: { port: 8888, // 端口 }, lintOnSave: false // 取消 ...
- 微信小程序如何使用iconfont阿里巴巴图标库？
步骤: 1.如图先下载: 2.找到iconfont.css改为iconfont.css 3.修改iconfont.wxss文件的内容,如图复制内容至其文件 4.替换到文件页面当中 5.去页面中引入i ...