原生的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. asp.net 5.0微信支付

    (原文出自:http://lib.csdn.net/article/wechat/46329) 微信支付官方坑太多,我们来精简 我把官方的代码,打包成了 an.wxapi.dll. 里面主要替换了下注 ...

  2. 【回顾整理】暴走的SQL语句练习！！！

    设计一个学生成绩数据库,该库包含学生,老师,课程和成绩等信息并完成后面的练习.学生:学号(SNO).姓名(SNAME).性别(SSEX).生日(SBIRTHDAY ).所属班级(SCLASS )课程: ...

  3. ORACLE中将数字转换为英文

    SELECT LEVEL, to_char(to_date(LEVEL,'J'),'Jsp') FROM dual CONNECT 运行结果如下图所示:   说明: TO_CHAR(aDate,'JS ...

  4. 贪心 CF 332 C 好题 赞

    题目链接: http://codeforces.com/problemset/problem/332/C 题目意思: 有n个命令,要通过p个,某主席要在通过的p个中选择k个接受. 每个任务有两个值ai ...

  5. js禁止默认的右键菜单或出现自定义右键菜单

    1.屏蔽默认的右键菜单 js: document.getElementById('myimg').oncontextmenu=function(){return false;} jquery: $(' ...

  6. ThinkPHP整合百度Ueditor

    文章来源:http://www.thinkphp.cn/code/267.html ThinkPHP整合百度Ueditor,基于黄永成老师的视频说明的申明:最好大家都能写绝对路径的都写好绝对路径比如: ...

  7. Python socket 广播信息到所有连接的客户端

    Python3,多线程,多客户端,广播数据 #!/usr/bin/env python3 import time import threading import queue import socket ...

  8. C/C++ char和int的区别

    字符字面值一般是用一对单引号来表示.char类型一般就是用字符字面值来初始化.赋值.由于char类型的是单字节长度,当给char类型的变量用字符字面值赋值时,当单引号里面的内容超过一个字节时,系统会自 ...

  9. 超实用--删除MYSQL中指定的数据的全部表

    作过的人都知道,重复测试数据库的苦恼. 用法:# Usage: ./script user password dbnane mysql.nixcraft.in ~~~~~~~~~~~~~ #!/bin ...

  10. leetcode_Search in Rotated Sorted Array II

    Follow up for "Search in Rotated Sorted Array": What if duplicates are allowed? Would this ...