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样式方法的主要内容,如果未能解决你的问题,请参考以下文章