js获取css样式方法

Posted bwlu---ed

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js获取css样式方法相关的知识,希望对你有一定的参考价值。

一、CSS样式共有三种:内联样式(行间样式)、内部样式、外部样式(链接式和导入式)

<div id="a" style="width: 100px;height: 100px;"></div>
<style type="text/css">
    #a{
        width: 100px;
        height: 100px;
    }
</style>
<body>
    <div id="a"></div>
</body>
<!-- 外部CSS样式 -->
<!-- 链接式 -->
<link rel="stylesheet" type="text/css" href="css/temp.css"/>
<style type="text/css">
    <!-- 导入式 -->
    @import url("css/style.css");
</style>

优先级:一般情况下:内联样式  >  内部样式  >  外部样式
特殊情况下:当外部样式放在内部样式之后,外部样式将覆盖内部样式。

<style type="text/css">
    #a{
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
<link rel="stylesheet" type="text/css" href="css/temp.css"/>

二、js获取css样式

1、内联样式(行间样式)的获取

<div id="a" style="width: 100px;height: 100px;background-color: blue;"></div>
function temp(){
    var a=document.getElementById("a");
    var aColor=a.style.backgroundColor;
    var aWidth=a.style["width"];
    alert(aColor+"  "+aWidth);
//    rgb(0,0,255)  100px
}

2、内部样式的获取

<style type="text/css">
    #a{
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
<body>
    <div id="a"></div>
</body>
function temp(){
//  非IE浏览器
    var a=document.getElementById("a");
    var aStyle=getComputedStyle(a);
    var aColor=aStyle.backgroundColor;
    var aWidth=aStyle["width"];
    alert(aColor+"  "+aWidth);
//  rgb(255,0,0)  200px
//  IE浏览器
//  var a=document.getElementById("a");
//  var aStyle=a.currentStyle;
//  var aColor=aStyle.backgroundColor;
//  var aWidth=aStyle["width"];
//  alert(aColor+"  "+aWidth);
//  red  200px
}

3、外部样式的获取(同内部样式)

<!-- css文件 -->
#a{
    width: 300px;
    height: 300px;
    background-color: #4F5F6F;
}

 


以上是关于js获取css样式方法的主要内容,如果未能解决你的问题,请参考以下文章

用js的啥方法把样式的某个属性去掉而其他的属性保留

廖雪峰js教程笔记12 用DOM更新 innerHMTL 和修改css样式

js如何获取css文件内的一个属性值

js怎么删除css的行内样式

JS中获取CSS样式的方法

js中style,currentStyle和getComputedStyle的区别以及获取css操作方法