原生的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获取元素样式的更多相关文章

  1. javascript 获取元素样式的方法

    javascript 获取元素样式常用方法. Javascript获取CSS属性值方法:getComputedStyle和currentStyle  1 .对于元素的内联CSS样式(<div s ...

  2. javascript获取元素样式值

    使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:1 ...

  3. 重温JavaScript获取CSS样式的方法（兼容各浏览器）

    众所周知,CSS样式有三种类型:行内样式.内部样式和外部样式,JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法 . 一.行内样式获取相对简单,通过element. ...

  4. 函数return/获取元素样式/封装自己的库

    一:函数return <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&qu ...

  5. 详细解析 JavaScript 获取元素的坐标

    引言 最近突然看到了有关图片懒加载的问题,大致意思就是初始状态下页面只加载浏览器可视区域的图片,剩余图片在当浏览器可视区域滚动到其位置时才开始加载.貌似现在许多大型网站都有实现懒加载,所以我便就此问题 ...

  6. Vue 获取元素样式 元素高度

    看到这个问题我第一时间想的竟然是JS 不知道你是怎么想的 不过昨天有一个小哥哥 问我一个Vue的 哈哈哈 get了 我当时问他为什么不用JS获取 他说 这个性能更高 那我们来看看这个高性能的获取元素高 ...

  7. 原生js获取元素样式

    摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之 ...

  8. javascript获取元素的计算样式

    使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:1 ...

  9. JavaScript获取元素CSS计算后的样式

    原文链接https://www.w3ctech.com/topic/40 我们在开发过程中,有时候需要根据元素已有样式来实现一些效果,那我们应该如何通过JavaScript来获取一个元素计算后的样式值 ...

随机推荐

  1. vb.net转换为C#方法

    第一个方法是上面有人说过的,用VB.NET TO C#的在线转换工具.既然你说不好用,那么可以这样:你把VB.NET代码编译了,然后用工具反编译(IL spy,reflector等)成C#代码.

  2. FileStream操作文件读写

    FileStream fsRead = new FileStream(@"C:\Users\Administrator\Desktop\u.html",FileMode.OpenO ...

  3. Implement Insert and Delete of Tri-nay Tree

    问题 Implement insert and delete in a tri-nary tree. A tri-nary tree is much like a binary tree but wi ...

  4. javascript:Array.slice.call 到Array.prototype.slice.call

    举个从对象到数组的例子: var obj={}; obj[1]=1; obj[2]=2; obj.length=2; var arr =Array.prototype.slice.call(obj); ...

  5. C++ Primer 5th 第5章 语句

    和大多数语言一样,C++提供了条件执行语句.重复执行相同代码的循环语句和由于中断当前控制流的跳转语句,表达式语句和声明语句等. 语句有简单语句和复合语句之分.简单语句但多数以分号结束,最简单的语句就是 ...

  6. IIS中启用gzip压缩（网站优化）

    HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术.大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度.这一般是指WWW服务器中安装的一个功能,当有人来访问这个服务器中的 ...

  7. IE6、火狐不支持a:visited

    今天做个样式,想让超链接点击后变成灰色,可发现IE里是没问题,可火狐就全灰色的.我测试了好几遍,发现不是顺序的问题.当然可以在火狐里地址栏里输入about:config.可总不能让用户去那里改吧.以下 ...

  8. 用PHP删除文件操作unlink

    使用unlink要注意的是$filename的值,要用的是本地绝对地址.比如"c:\aaa\a.jpg",不能用相对地址比如:"../aa.jpg",那么如果在 ...

  9. cf D. Levko and Array

    http://codeforces.com/contest/361/problem/D 用二分搜索相邻两个数的差的绝对值,然后用dp记录数改变的次数.dp[i]表示在i之前改变的次数,如果|a[i]- ...

  10. 【Xamarin 在Mac OS 上的部署安装环境】

    ******************没用Mac 的机子,也只能靠虚拟机了**********1 安装VMware 10 从网上下载即可2 下载MAC OS 10.9.5的安装镜像,网上有很多,最好使用 ...