原生的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. 使用SQL语句创建和删除约束

    原文:http://blog.csdn.net/hamber_bao/article/details/6504905 约束的目的就是确保表中的数据的完整性. 常用的约束类型如下: 主键约束:(Prim ...

  2. a标签调用js的几种方法

    我们常用的在a标签中有点击事件: <a> 标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScrip ...

  3. 前端笔试题目总结——应用JavaScript函数递归打印数组到HTML页面上

    数组如下: var item=[{ name:'Tom', age:70, child:[{ name:'Jerry', age:50, child:[{ name:'William', age:20 ...

  4. hadoop mapreduce 端参数优化

    在MapReduce执行过程中,特别是Shuffle阶段,尽量使用内存缓冲区存储数据,减少磁盘溢写次数:同时在作业执行过程中增加并行度,都能够显著提高系统性能,这也是配置优化的一个重要依据. 下面分别 ...

  5. SignalR2.0开发实例之——私聊

    一.前言 继续上一章的补充,这章介绍使用私聊的功能.主要通过一个方法   Clients.Client(Context.ConnectionId).showMessage(msg); SignalR框 ...

  6. Mysql学习（慕课学习笔记9）查询、分组

    查找记录 Select select username,id from users; Group by 进行分组 select sex from users group by sex; 分组条件 se ...

  7. quartz spring 时间配置

    关于时间配置, 1前面带0和不带0的区别是???   (开始时间,带0以整点整分整秒开始,不带的以启动时间定时循环??) 比如 0 7/37 * * * ?  表示每个小时的第7分钟开始执行,然后隔三 ...

  8. MSIL

    公共字段Add 将两个值相加并将结果推送到计算堆栈上. Add_Ovf 将两个整数相加,执行溢出检查,并且将结果推送到计算堆栈上. Add_Ovf_Un 将两个无符号整数值相加,执行溢出检查,并且将结 ...

  9. Gradle sync failed: failed to find Build Tools revision 21.1.2

    从github上下载了一个开源项目到Android Studio 出现以下问题: 下午2:56:05 Gradle sync started下午3:00:11 Gradle sync failed: ...

  10. javascript 数组slice和splice

    var a = [1,4,2,5,6,9,10];console.log(a.slice(3)); //[5,6,9,10]console.log(a.slice(-3)); //[6,9,10]co ...