js 排他思想(百度换肤+表单全选案例) 获取属性自定义值(tab栏切换案例) H5自定义属性

• 排他思想
• 百度换肤效果
• 表单全选
• 获取自定义属性值
• tab栏切换案例(重点案例)
• H5自定义属性

先排除其他人,然后再设置自己,这种先排除其他人的思想成为排他思想.
案例:有5个相同按钮,点击到哪个按钮时哪个按钮的背景颜色变化,其他按钮不变.

		按钮1
		按钮2
		按钮3
		按钮4
		按钮5
		
	

分析:
1.循环注册一组图片,点击后获取图片的src路径,把路径给body就可以设置背景了

1.之前学习过element.属性
2.element.getAttribute('属性)
区别:
element.属性:获取内置属性值
element.getAttribute('属性):获取自定义属性值(程序员自定义的属性)

更改属性值
1.element.属性=‘值’
例如一个div 的id值为demo,修改为test
div.id=‘test’;
2.element.setAttribute(‘属性’,‘值’);
//主要针对于自定义属性值的更改
div.setAttribute(‘index’,2)
3.移除属性
element.removeAttribute(‘属性’);

		
			
				

					
手机
					
电脑
					
电视
					
冰箱
					
空调
				
			
			
				这里都是手机相关信息哦
				这里都是电脑相关信息哦
				这里都是电视相关信息哦
				这里都是冰箱相关信息哦
				这里都是空调相关信息哦
			
		

		
	

自定义属性的目的:保存并使用数据.有些数据可以保存在页面中而不用保存到数据库中.
自定义属性通过element.getAttribute('属性):获取自定义属性值.

H5新增了自定义属性:
1.设置H5自定义属性
H5规定自定义属性以data-开头作为属性名并赋值.
2.获取H5自定义属性
(1)兼容性获取 element.getAttribute('属性);
(2)H5新增 element.dataset.属性或者element.dataset[‘属性’] ,只能获取data-开头的.
ie11以上才支持,要注意兼容性问题.
如果用H5新增方法获取属性值,当自定义名有多个-连结的单词,获取时要采用驼峰命名法.