JavaScript基础-12

js操作HTML元素属性

首先获取元素对象
操作元素属性
- 获取：
  - 元素对象名.属性名。返回当前属性的属性值。—-固有
  - 元素对象名.getAttribute(“属性名”);返回自定义属性的值—–自定义
- 修改
  - 元素对象名.属性名=属性值
  - 元素对象名.setAttribute(“属性名”,”属性值”);//修改自定义属性的值—-自定义

注意：

尽量的不要去修改元素的id值和name属性值。
使用自定义方式获取固有属性内容，value的值获取的是默认值，不能够获取到实时的用户数据。

自定义的属性的获取和修改使用的方法和格式同servlet中的相似

<html>
	<head>
		
		<title>js操作HTML的元素属性</title>
		<meta charset="UTF-8"/>
		<!--声明js代码域-->
		<script type="text/javascript">
			//声明函数---固有属性
				//获取属性值
				function testField(){
					//获取元素对象
					var inp=document.getElementById("uname");
					//获取元素属性值
					alert(inp.type+":"+inp.name+":"+inp.id+":"+inp.value);	
				}
				//修改元素属性值
				function testField2(){
					//获取元素对象
						var inp=document.getElementById("uname");
					//修改元素属性
						inp.value="哈哈";
						inp.type="button";
				}
			
			//声明函数---自定义属性
				//获取
				function testOwnField(){
					//获取元素对象
						var inp=document.getElementById("uname");
					//获取自定义属性的值
						alert(inp.getAttribute("abc"));
				}
				//修改
				function testOwnField2(){
					//获取元素对象
					var inp=document.getElementById("uname");
					//修改自定义属性的值
					inp.setAttribute("abc","呵呵");
				}
			//使用自定义方式操作固有属性
				function testOper(){
					//获取元素对象
						var inp=document.getElementById("uname");
					//操作对象属性
						alert(inp.getAttribute("type"));
						alert(inp.getAttribute("value"));
				}
		</script>
	</head>
	<body>
		<h3>js操作HTML的元素属性</h3>
		<input type="button" name="" id="" value="测试获取元素属性--固有" onclick="testField()" />
		<input type="button" name="" id="" value="测试修改元素属性--固有" onclick="testField2()" />
		<input type="button" name="" id="" value="测试获取元素属性--自定义" onclick="testOwnField()" />
		<input type="button" name="" id="" value="测试修改元素属性--自定义" onclick="testOwnField2()" />
		<input type="button" name="" id="" value="测试操作元素自定义操作固有属性" onclick="testOper()" />
		<hr />
		用户名 : <input type="text" name="uname" id="uname" value="" abc="嘿嘿"/>
	</body>
</html>

js操作元素内容

首先获取元素对象
获取元素内容
- 元素对象名.innerHTML—-返回当前元素对象的所有内容，包括HTML标签
- 元素对象名.innerText—-返回当前元素对象的文本内容，不包括HTML标签

修改元素内容

元素对象名.innerHTML=”新的值”。—-会将原有内容覆盖，并HTML标签会被解析
元素对象名.innerHTML=元素对象名.innerHTML+”新的值”—-追加效果

元素对象名.innerText=”新的值”—-会将原有内容覆盖，但HTML标签不会被解析，会作为普通文本显示。

<html>
	<head>
		<title>js操作元素内容学习</title>
		<meta charset="UTF-8"/>
		<!--声明css-->
		<style type="text/css">
			#div01{
				width: 200px;
				height: 200px;
				border: solid 1px orange;
			}			
		</style>
		<!--声明js代码域-->
		<script type="text/javascript">
			//获取元素内容
				function getContext(){
					//获取元素对象
						var div=document.getElementById("div01");
					//获取元素内容
						alert(div.innerHTML);
						alert(div.innerText);
				}
			//修改元素内容
				function updateContext(){
					//获取元素对象
						var div=document.getElementById("div01");
					//修改元素对象内容
						div.innerHTML="<b>你先上，皇军给你殿后，八嘎</b>";
				}
				
				function updateContext2(){
					//获取元素对象
						var div=document.getElementById("div01");
					//修改元素对象内容
						div.innerText="<b>你先上，皇军给你殿后，八嘎</b>";
				}
			
			
		</script>
	</head>
	<body>
		<h3>js操作元素内容学习</h3>
		<input type="button" name="" id="" value="测试获取元素内容---innerHTML&innerText"  onclick="getContext()"/>
		<input type="button" name="" id="" value="测试修改元素内容--innerHTML"  onclick="updateContext()"/>
		<input type="button" name="" id="" value="测试修改元素内容--innerText"  onclick="updateContext2()"/>
		<hr />
		<div id="div01">
			<b>皇军，前面有八路的干活。</b>
			<b>皇军，前面有八路的干活。</b>
			
		</div>
	</body>
</html>

js操作元素样式

获取元素对象
通过style属性
- 元素对象名.style.样式名=”样式值”—-添加或者修改
- 元素对象名.style.样式名=””—-删除样式,设置属性值为空
- 注意:
  - 以上操作，操作的是HTML的style属性声明中的样式。而不是其他css代码域中的样式。

通过className

元素对象名.className=”新的值”—-添加类选择器样式或者修改类选择器样式
元素对象名.className=””—-为空，删除类样式。

注意：

。js中使用用元素对象名.className=”新的值”就可以为改属性添加类名。在css代码域中，使用类选择器进行添加样式，从而css代码域中对其样式进行修改

<html>
	<head>
		<title>js操作元素的样式</title>
		<meta charset="UTF-8"/>
		<!--声明css-->
		<style type="text/css">
			#showdiv{
				width: 200px;
				height: 200px;
				border: solid 1px;
			}
			
			.common{
				width: 200px;
				height: 200px;
				border: solid 1px;
			}
			
			.common2{
				width: 200px;
				height: 200px;
				border: solid 1px;
				background-color: aqua;
			}
		</style>
		<!--声明js代码域-->
		<script type="text/javascript">
			//js操作元素样式
				//js给元素操作样式---style
					function testOperCss(){
						//获取元素对象
							var showdiv=document.getElementById("showdiv");
						//添加元素样式
							showdiv.style.backgroundColor="#FFA500";
						//js修改元素样式
							showdiv.style.border="solid 2px red";
						//js删除样式
							showdiv.style.border="";
					}
				//js操作样式--className				
					function testOperCss2(){
						//获取元素对象
							var div01=document.getElementById("div01");
						//获取
							alert(div01.className);
						//添加或者修改
							div01.className="common2";
						//删除
							div01.className="";
												
					}	
		</script>
	</head>
	<body>
		<h3>js操作元素的样式</h3>
		<input type="button" name="" id="" value="测试操作元素样式--style" onclick="testOperCss()" />
		<input type="button" name="" id="" value="测试操作元素样式--className" onclick="testOperCss2()" />
		<hr />
		<div id="showdiv" style="border: solid 2px blue;">
			
		</div>
		<div id="div01" class="common">
			
		</div>
	</body>
</html>