標籤：ntb pre css styles 連結 行間樣式 str class code
一、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樣式方法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
