属性操作与样式设置详解-优快云博客

本文链接：https://blog.youkuaiyun.com/java_zhaoyanli/article/details/50776571

属性集合：包含当前元素的所有属性

如何获取属性集合：

属性：attributes

使用方式：DOM对象 attributes

返回：NamedNodeMap类型的结果

1、读取属性值
1、element.attributes[下标].value
2、element.attributes["属性名"].value
3、element.getAttributeNode("属性名").value
4、element.getAttribute("属性名");
2、修改属性值
1、element.setAttribute("属性名称","值");
2、element.setAttributeNode(attrNode);
3、元素.属性名 = 值;
var value = 元素.属性名;

a.id = "testA"; // 将 a 对象的 id属性值修改为 testA

元素样式

1、CSS 定义方式
1、内联样式
2、内部样式表
3、外部样式表

2、元素样式
1、操作元素的行内样式
js中最常用的操作是访问元素的内联样式
属性:style
返回：CSSStyleDeclaration 类型的对象
该对象中，包含当前元素定义好的所有内联样式
可以通过样式属性名称获取或修改当前元素的内联样式
属性名：将css属性名称中，去掉横线变成驼峰命名法
CSS: javascript
width width
background-color backgroundColor
border-bottom-color borderBottomColor

获取样式：element.style.属性名; -->返回的所有数据都是string类型，如果有单位的话，也会将单位一起返回
设置样式：element.style.属性名 = value ; 设置的值也是字符串，如果带单位的话，需要将单位一同设置
element.style.width="500px";
2、获取计算的样式
计算的样式：内部样式表，外部样式表中的属性值，是经过计算的。

计算的样式：
DOM：
document.defaultView.getComputedStyle(dom元素).属性名;
IE：
元素对象.currentStyle.属性;
注意：以上方式，只能获取相应的属性值，是不能修改的。
3、修改样式表中的样式
1、先获取样式表对象
var sheet = document.styleSheets[i];
2、获取样式表中所有的样式规则
var rules = sheet.cssRules;
或者
var rules = sheet.rules;
3、获取规则集合中，包含要修改属性的规则
var rule = rules[下标];
4、获取或设置规则中的属性值
rule.style.属性名=值;

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8" />
	<script>
		function getAttr(){
			var a = document.getElementById("a");
			var attrs = a.attributes;
			console.log("共有"+attrs.length+"个属性");
			console.log(attrs[0].value);
			console.log(attrs["href"].value);
			console.log("href:"+a.getAttributeNode("href").value);
			console.log("href:"+a.getAttribute("href"));
		}

		function setAttr(){
			var a = document.getElementById("a");
			// 设置 a 的 href 属性值 为 youkuaiyun.com
			a.setAttribute("href","http://www.youkuaiyun.com");
		}
	</script>

 </head>

 <body>
  <a id="a" href="http://www.baidu.com">百度</a>
	<button οnclick="getAttr()">获取属性</button>
	<button οnclick="setAttr()">修改属性</button>
 </body>
</html>

DOM-元素的属性，样式