原生的JavaScript获取写在标签内部的样式很简单：
<div class="test" id="test" style="width:100px;">test</div>
<script type="text/javascript">
window.onload=function(){
var oTest=document.getElementById("test");
alert(oTest.style.width); //100px }
</script>
对于外部样式 与 嵌入式样式，JavaScript通过style.width没有办法获取到宽度，解决办法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.test{ width:100px; height:100px; border:5px solid #ddd; padding:20px; font-family:Arial, Helvetica, sans-serif; font-size:24px;}
</style> <script type="text/javascript">
window.onload=function(){
var oTest=document.getElementById("test");
/*var styleInfo=window.getComputedStyle ?window.getComputedStyle(oTest,null):window.currentStyle;*/ function getStyle(ele,name){
var styleInfo;
if(window.getComputedStyle){ //非ie
styleInfo=window.getComputedStyle(ele,false)[name];
}else{ //ie opera
styleInfo=window.currentStyle[name];
}
return styleInfo;
}
alert(getStyle(oTest,"width")); }
</script>
</head> <body>
<div class="test" id="test" style="">test</div>
</body>
</html>
相关连接：
js获取样式、currentStyle和getComputedStyle的兼容写法
javascript获取元素CSS样式代码示例
js正确获取元素样式详解
js(1)取样式表中的样式
JavaScript获取元素样式的更多相关文章
-
javascript 获取元素样式的方法
javascript 获取元素样式常用方法. Javascript获取CSS属性值方法:getComputedStyle和currentStyle 1 .对于元素的内联CSS样式(<div s ...
-
javascript获取元素样式值
使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:1 ...
-
重温JavaScript获取CSS样式的方法（兼容各浏览器）
众所周知,CSS样式有三种类型:行内样式.内部样式和外部样式,JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法 . 一.行内样式获取相对简单,通过element. ...
-
函数return/获取元素样式/封装自己的库
一:函数return <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&qu ...
-
详细解析 JavaScript 获取元素的坐标
引言 最近突然看到了有关图片懒加载的问题,大致意思就是初始状态下页面只加载浏览器可视区域的图片,剩余图片在当浏览器可视区域滚动到其位置时才开始加载.貌似现在许多大型网站都有实现懒加载,所以我便就此问题 ...
-
Vue 获取元素样式 元素高度
看到这个问题我第一时间想的竟然是JS 不知道你是怎么想的 不过昨天有一个小哥哥 问我一个Vue的 哈哈哈 get了 我当时问他为什么不用JS获取 他说 这个性能更高 那我们来看看这个高性能的获取元素高 ...
-
原生js获取元素样式
摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之 ...
-
javascript获取元素的计算样式
使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:1 ...
-
JavaScript获取元素CSS计算后的样式
原文链接https://www.w3ctech.com/topic/40 我们在开发过程中,有时候需要根据元素已有样式来实现一些效果,那我们应该如何通过JavaScript来获取一个元素计算后的样式值 ...
随机推荐
-
sass的安装与基础
安装教程:http://www.haorooms.com/post/sass_css 手册:http://sass.bootcss.com/docs/guide/ http://www.w3c ...
-
jrtplib跨网络通讯NAT穿透问题解决方法
前几篇文章讲了使用jrtplib在Android和pc端进行通讯的方法 在实际项目中,手机端和pc端一般不会在同一个子网内,两者之间联络可能要走路由器之类的NAT(网络地址转换 Network Add ...
-
Oracle 隔离级别
From 11gR2: http://download.oracle.com/docs/cd/E11882_01/server.112/e16508/consist.htm#CNCPT621 一. A ...
-
设置服务器远程连接mysql
一直单人开发所以没有考虑过这方面,到新公司要做合作开发,所以要进行设置,然后开始自己搞 下面把过程罗列一下: 1)由于使用的云服务器 ,所以上面都配置好了,直接配置了mysql的命令行输入密码就可以进 ...
-
IOS 监听通讯录是否改变
ABAddressBookRef addressBook = ABAddressBookCreateWithOptions(NULL, &error); ABAddressBookRegist ...
-
【BZOJ3691】游行 费用流
[BZOJ3691]游行 Description 每年春季,在某岛屿上都会举行游行活动.在这个岛屿上有N个城市,M条连接着城市的有向道路.你要安排英雄们的巡游.英雄从城市si出发,经过若干个城市,到城 ...
-
c语言基础，\r, \n, \r\n
Enumeration (or enum) in C Enumeration (or enum) is a user defined data type in C. It is mainly used ...
-
sublime text 显示 typescript高亮
用ionic angular2写东西,还是用我的sublime 发现ts文件不识别,没有高亮.搜呗. 搜索出来的博客地址:http://www.cnblogs.com/happen-/p/638553 ...
-
Influxdb时序数据库阅读笔记
时序数据库 2017年2月Facebook开源了beringei时序数据库:到了4月基于PostgreSQL打造的时序数据库TimeScaleDB也开源了,而早在2016年7月,百度云在其天工物联网平 ...
-
python——深刻理解Python中的元类(metaclass)
译注:这是一篇在Stack overflow上 很热的帖子.提问者自称已经掌握了有关Python OOP编程中的各种概念,但始终觉得元类(metaclass)难以理解.他知道这肯定和自省有关,但仍然觉 ...