JS ------- document内容及样式

最新推荐文章于 2024-03-22 13:12:02 发布
qq_42412646
最新推荐文章于 2024-03-22 13:12:02 发布
阅读量302
点赞数
本文链接：https://blog.csdn.net/qq_42412646/article/details/102889084
版权
<html>
	<head>
		<title>js-documnet元素内容和样式操作</title>
		<meta charset="UTF-8"/>
		
		<script type="text/javascript">
//			单标签属性操作
//			固定属性的操作
			function testOper1(){      
//				获取对象
				var inp=document.getElementById("uname");   
				alert(inp.type+"::"+inp.name+"::"+inp.id+"::"+inp.value);       //可以直接用.直接获取其内部属性
				alert(tt);     //不会报错，其会显示undefined
			}
			function testChange(){
//				获取对象
				var inp=document.getElementById("uname");
				inp.type="button"      //对获取的对象属性值进行修改
				inp.value="古河渚";    
				alert(inp.value);     //输出当前数据的value值，当没用上面的重新赋值，会输出用户输入的值，用户也可以直接改变文本value值
			}
			function testAdd(){
//				获取对象
				var inp=document.getElementById("uname");   
				inp.class="Animation";    //在获取的对象添加属性
				alert(inp.class);
			}
			function testClear(){
//				获取对象
				var inp=document.getElementById("uname");      
				inp.value="";    //把获取的对象属性清空
				alert(inp.value);
			}
//			自定义属性的操作
            function testextra(){
//          	获取对象
				var inp=document.getElementById("uname");   
				alert(inp.getAttribute("Animation"));
            }
            function testextra2(){
//          	获取对象
				var inp=document.getElementById("uname"); 
				inp.setAttribute("Animation","clannad after story");     //把指定的元素属性进行修改
				alert(inp.getAttribute("Animation"));              //属性值变了，属性哦ing名没有变
            }
             function testextra3(){
//          	获取对象
				var inp=document.getElementById("uname");     //我们一般不会修改对象name值因为这是键值会与后台进行链接，也一般不改变id,因为我们一般用id来进行对象的获取
				alert(inp.getAttribute("value"));         //输出的是空，因为没有给value赋值，即使用户端输入也不行，用户端不能在这种方式下改变标签的固定属性值
				inp.setAttribute("value","CLANNAD"); 
				alert(inp.getAttribute("value"));          //和以上的操作一个效果
            }
             
//          双标签内部属性测试
//			对于那些用两个标签确定的，我们可以操作其内部的内容
// 			双标签的内容操作
			function testOper2(){
//				获取对象
				var div01=document.getElementById("div01");
				alert(div01.innerHTML);            //innerHTML获取对象中的所有内容，包括其对象的标签
				alert(div01.innerText);             //innerText获取对象的文本内容
			}
			function tsetChangeCssText(){
				var div01=document.getElementById("div01");
				div01.innerText="clannad 世界第一"                 //单纯的打印全部的文本内容
				alert(div01.innerText);  
				div01.innerText=div01.innerText+"そうです";	       //进行文档的拼接  
				alert(div01.innerText);
			}
			function tsetChangeCssText(){
				var div01=document.getElementById("div01");
				div01.innerHTML="<b>clannad 世界第一</b>"    //HTML是类型的数据可以在显示的时候进行执行
				alert(div01.innerText);
				div01.innerHTML=div01.innerHTML+"<b>そうです</b>";	 //进行HTML数据的拼接
				alert(div01.innerText);
			}
//			双标签的样式操作
//			属性直接操作样式
			function testCssOper(){
				var div02=document.getElementById("div02");
				div02.style.backgroundColor="red";    //添加对象的背景颜色
				div02.style.border="solid 3px purple";   //修改对象的边框属性
				div02.style.backgroundColor=""         //清空对象的背景颜色
			}
//			className方式操作样式
			function testCssOper2(){
				var div02=document.getElementById("div02");
				alert(div02.className);    //获取
				div02.className="common2";   //修改
//				div02.className="";        //清空
			}
		</script>
		<style type="text/css">
			#div01{
				width: 200px;
				height: 200px;
				border: solid 2px yellow;
			}
			#div02{
				width: 200px;
				height: 200px;
				border: solid 2px cyan;
			}
			.common{
				width: 200px;
				height: 200px;
				border: solid 2px cyan;
			}
			.common2{
				width: 200px;
				height: 200px;
				border: solid 2px purple;
			}
		</style>
	</head>
	<body>
		<h3>js-documnet元素内容和样式操作</h3>
		<h4>单标签操作</h4>
		<input type="button" name="" id="" value="测试单标签操作" onclick="testOper1()" />
		<input type="button" name="" id="" value="测试单标签修改操作" onclick="testChange()" />
		<input type="button" name="" id="" value="测试单标签添加操作" onclick="testAdd()" />
		<input type="button" name="" id="" value="测试单标签清空操作" onclick="testClear()" />
		<input type="button" name="" id="" value="测试单标签自定义属性操作" onclick="testextra2()" />
		<input type="button" name="" id="" value="测试单标签自定义方法对固定属性操作" onclick="testextra3()" />
		<hr />
		单标签测试 <br /><br />
		<input type="text" name="uname" id="uname" value="" Animation="clannad" />
		<hr />
		双标签测试<br /><br />
		<input type="button" name="" id="" value="测试双标签内容操作" onclick="testOper2()" />
		<input type="button" name="" id="" value="测试双标签内容修改和添加操作" onclick="tsetChangeCssText()" />
		<input type="button" name="" id="" value="测试双标签样式一系列操作" onclick="testCssOper()" />
		<input type="button" name="" id="" value="测试双标签样式一系列操作--className" onclick="testCssOper2()" />
		<hr /><br />
		<div id="div01">
			<b>clannad 赛高！</b>
		</div>
		<div id="div02" class="common">
			
		</div>
	</body>
</html>