JavaScript-----自定义属性操作

🍓.获取元素的属性值

🐇element.属性     元素本身自带的属性

	<div id="demo" index="1" data-list-name="andy"></div>
	</body>
	<script type="text/javascript">
		var div = document.querySelector("div");
		console.log(div.id) //demo

🐇 element.getAttribute("属性")        get是获取    attribute是属性

	<div id="demo" index="1" data-list-name="andy"></div>
	</body>
	<script type="text/javascript">
		var div = document.querySelector("div");
		console.log(div.id) //demo
		// 可以自己添加的属性叫做自定义属性

		console.log(div.getAttribute('id')) //demo
		console.log(div.getAttribute('index')) //1

---

 🍓设置元素的属性值        

🐇element.属性='值'

	<div id="demo" index="1" data-list-name="andy"></div>
	</body>
	<script type="text/javascript">
		var div = document.querySelector("div");

		div.id="text";

🐇element.className='属性名'

	<div id="demo" index="1" data-list-name="andy"></div>
	</body>
	<script type="text/javascript">
		var div = document.querySelector("div");

		div.className='test'

🐇element.setAttribute("属性","值")

既能修改自定义属性,也能修改原来的属性

🐇修改

	<div id="demo" index="1" data-list-name="andy"></div>
	</body>
	<script type="text/javascript">
		var div = document.querySelector("div");
		div.setAttribute("index", 2);

 

🐇添加

	<div id="demo" index="1" data-list-name="andy"></div>
	</body>
	<script type="text/javascript">
		var div = document.querySelector("div");
		div.setAttribute("class", "box");

 

---

 🍓 移除属性

🐇element.removeAttribute("属性")

	<div id="demo" index="1" data-list-name="andy"></div>
	</body>
	<script type="text/javascript">
		var div = document.querySelector("div");
		div.removeAttribute('index')

 

---

 🍓h5自定义属性

🐇  h5规定自定义属性data-开头作为属性名并赋值

          <div data - index = "1" > < /div>
         也可以用js设置
        element.setAttribute("data-index","2")

	<div id="demo" index="1" data-list-name="andy"></div>
	</body>
	<script type="text/javascript">
		var div = document.querySelector("div");
		div.setAttribute("data-index", "2")

🐇   h5新增element.dataset.index  或  element.dataset['index']  ie11才支持

只能获取data开头的

	<div id="demo" index="1" data-list-name="andy"></div>
	</body>
	<script type="text/javascript">
		var div = document.querySelector("div");
		console.log(div.dataset)//DOMStringMap {index: '2'}
		console.log(div.dataset.index)//2
		console.log(div.dataset['index'])//2
		
		//如果自定义属性里有多个-连接的单词,获取的时候要采取驼峰命名法
		console.log(div.dataset.listName);//andy
		console.log(div.dataset["listName"]);//andy

CSDN话题挑战赛第1期
活动详情地址：CSDN