在云筆記中發現了很久以前寫的總結，看著總結還能想到當初認認真真一個一個瀏覽器測試的樣子。
【目錄】
1 jQuery操作屬性及樣式
1.1 設置或返回被選元素的屬性值
1.2 訪問匹配元素的樣式
1.3 為每個匹配的元素添加類名
2 JS獲取DOM對象CSS屬性值
2.1 只能獲取行內樣式屬性值
2.2 IE9以上谷歌火狐QQ獲取當前元素所有最終使用的CSS屬性值
2.3 IE9以上谷歌火狐QQ獲取行內、非行內樣式屬性值
2.4 IE獲取當前應用的最終CSS屬性值
2.5 IE9以上谷歌火狐QQ獲取當前元素所有最終使用的CSS屬性值
2.6 IE瀏覽器獲取當前元素所有最終使用的CSS屬性值
3 JS獲取DOM對象屬性名稱
3.1 getAttribute()：返回指定屬性名的屬性值
1. jQuery操作屬性及樣式
注意辨析.png
設置或返回被選元素的屬性值
$("img").attr("src");
$("img").attr({ src: "test.jpg", alt: "Test Image" });
訪問匹配元素的樣式
$("p").css("color");
$("p").css({ "color": "#ff0011", "background": "blue" });
為每個匹配的元素添加類名
$("p").addClass("selected1 selected2");
2. JS獲取DOM對象CSS屬性值
2.1 只能獲取行內樣式屬性值
說明：
element.style //只能獲取內嵌樣式
注意：
IE8、IE7、IE5（IE6沒測試）不支持document.getElementsByClassName，IE9以上可以
用getElementById上述IE可實現（新屬性border-radius等不包括）
示例：
<style>
.demo{ width: 100px; height: 100px; line-height: 100px; text-align: center;}
</style>
<div class="demo" index="info" style="font-size:22px;background: deeppink;color: #fff;border: 4px solid green;margin: 10px 20px 30px 40px;border-radius:10px;" >測試測試</div>
<script>
//無法獲取非行內樣式
console.log(document.getElementsByClassName('demo')[0].style.background);//deeppink
console.log(document.getElementsByClassName('demo')[0].style.width);//空白
//可以獲取復合屬性
console.log(document.getElementsByClassName('demo')[0].style.border);//4px solid green
console.log(document.getElementsByClassName('demo')[0].style.margin);//10px 20px 30px 40px
//注意駝峰式寫法
console.log(document.getElementsByClassName('demo')[0].style.fontSize);//22px
console.log(document.getElementsByClassName('demo')[0].style.borderRadius)//10px
console.log(document.getElementsByClassName('demo')[0].style.border-radius)//報錯
console.log(document.getElementsByClassName('demo')[0].style.font-size);//報錯
</script>
clipboard.png
2.2 IE9以上谷歌火狐QQ獲取當前元素所有最終使用的CSS屬性值
說明：
window.getComputedStyle(element,偽類)//是一個可以獲取當前元素所有最終使用的CSS屬性值
注意：
目前有文章說這個是 "非IE瀏覽器獲取非內嵌樣式" ，經測試，在IE6-8不支持該方法，在IE9以上可以正常輸出
示例：
<style>
#div {width: 666px;background: yellow;}
</style>
<div id="div" style="color: red;font-size: 20px; width: 12px;"></div>
<script>
var div = document.getElementById('div');
var width = window.getComputedStyle(div, null).width;
</script>
clipboard.png
2.3 IE9以上谷歌火狐QQ獲取行內、非行內樣式屬性值
說明：
document.defaultView：返回當前文檔關聯的window對象
Window.getComputedStyle( )：“返回元素的計算后的css樣式
注意：
網上的文章說這個//非IE瀏覽器獲取非內嵌樣式，經測試發現，IE9\IE10\谷歌\火狐\qq瀏覽器均可獲取行內、非行內樣式
示例：
<style>
.demo {width: 100px;height: 100px;line-height: 100px;text-align: center;}
</style>
<div id="demoid" class="demo" index="info" style="font-size:22px;background: deeppink;">測試測試</div>
<script>
var div = document.getElementsByTagName("div")[0];
console.log(document.defaultView.getComputedStyle(div, null).fontSize)//22px
console.log(document.defaultView.getComputedStyle(div, null).textAlign) //center
</script>
clipboard.png
2.4 IE獲取當前應用的最終CSS屬性值
說明：
element.currentStyle //currentStyle是IE瀏覽器自己的一個屬性，其語法與ele.style類似，差別在于element.currentStyle返回的是元素當前應用的最終CSS屬性值（包括外鏈CSS文件，頁面中嵌入的<style>屬性等）
注意：
這個方法只有IE瀏覽器支持（經測試IE5以上都可以），谷歌火狐QQ均不支持
對于綜合屬性border等，,IE8及以下是返回undefined，IE8以上返回空白，對于margin這樣的復合屬性IE瀏覽器可以正確返回
示例：
<style>
.demo { width: 100px; height: 100px; line-height: 100px; text-align: center; font-size:32px;}
</style>
<div id="demoid" class="demo" index="info" style="font-size:22px;background: deeppink;color: #fff;border: 4px solid green;margin: 10px 20px 30px 40px;border-radius:10px;">測試測試</div>
<script>
console.log(document.getElementById('demoid').currentStyle.width); //100px
console.log(document.getElementById('demoid').currentStyle.border); //空白,IE8及以下是undefined
console.log(document.getElementById('demoid').currentStyle.margin); //10px 20px 30px 40px
console.log(document.getElementById('demoid').currentStyle.fontSize); //22px
console.log(document.getElementById('demoid').currentStyle.borderLeftWidth)//4px
console.log(document.getElementById('demoid').currentStyle.index)//undefined
</script>
clipboard.png
2.5 IE9以上谷歌火狐QQ獲取當前元素所有最終使用的CSS屬性值
說明：
getComputedStyle是一個可以獲取當前元素所有最終使用的CSS屬性值。返回的是一個CSS樣式聲明對象([object CSSStyleDeclaration])，只讀。
注意：
getPropertyValue不支持駝峰寫法。兼容IE9及以上，FF,Chrom,火狐，QQ，Safari,Opera)
示例：
<style>
.demo { width: 100px; height: 100px; line-height: 100px; text-align: center; font-size:32px;}
</style>
<script>
var test = document.getElementById('demoid');
console.log(window.getComputedStyle(test, null).getPropertyValue("background-color"));//rgb(255, 20, 147)
console.log(window.getComputedStyle(test, null).getPropertyValue("font-size"));//22px
console.log(window.getComputedStyle(test, null).getPropertyValue("fontSize"));//空白
console.log(window.getComputedStyle(test, null).getPropertyValue("index"));//空白
</script>
clipboard.png
2.6 IE瀏覽器獲取當前元素所有最終使用的CSS屬性值
說明：
只支持IE瀏覽器
注意：
屬性名需要寫成駝峰寫法，否則IE6不支持，如果無視IE6，可以寫成”background-color”
示例：
<style>
.demo { width: 100px; height: 100px; line-height: 100px; text-align: center; font-size:32px;}
</style>
<div id="demoid" class="demo" index="info" style="font-size:22px;background: deeppink;color: #fff;border: 4px solid green;margin: 10px 20px 30px 40px;border-radius:10px;">測試測試</div>
<script>
console.log(document.getElementById('demoid').currentStyle.getAttribute("color"));//#fff
console.log(document.getElementById('demoid').currentStyle.getAttribute("fontSize"));//22px
console.log(document.getElementById('demoid').currentStyle.getAttribute("border"));//null
console.log(document.getElementById('demoid').currentStyle.getAttribute("margin"));//10px 20px 30px 40px
console.log(document.getElementById('demoid').currentStyle.getAttribute("backgroundColor"));//deeppink
console.log(document.getElementById('demoid').currentStyle.getAttribute("background-color"));//deeppink
</script>
clipboard.png
3. JS獲取DOM對象屬性名稱
3.1 getAttribute()：返回指定屬性名的屬性值
說明：
getAttribute() 方法返回指定屬性名的屬性值，所有主流瀏覽器均支持 getAttribute() 方法。
注意：
經測試發現，IE578910\谷歌\火狐\qq瀏覽器均可
示例：
<a href="#" target="_blank" style="color: red;"></a>
console.log(document.getElementsByTagName("a")[0].getAttribute("target")); //_blank
console.log(document.getElementsByTagName("a")[0].getAttribute("color")); //null
clipboard.png
