JQ 和 JS原生操作属性及样式的总结
2017-11-02 本文已影响38人
辣瓜瓜
在云笔记中发现了很久以前写的总结，看着总结还能想到当初认认真真一个一个浏览器测试的样子。
【目录】
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
