<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" value="测试单标签操作" /> <input type="button" value="测试单标签修改操作" /> <input type="button" value="测试单标签添加操作" /> <input type="button" value="测试单标签清空操作" /> <input type="button" value="测试单标签自定义属性操作" /> <input type="button" value="测试单标签自定义方法对固定属性操作" /> <hr /> 单标签测试 <br /><br /> <input type="text" value="" Animation="clannad" /> <hr /> 双标签测试<br /><br /> <input type="button" value="测试双标签内容操作" /> <input type="button" value="测试双标签内容修改和添加操作" /> <input type="button" value="测试双标签样式一系列操作" /> <input type="button" value="测试双标签样式一系列操作--className" /> <hr /><br /> <div> <b>clannad 赛高！</b> </div> <div> </div> </body> </html>
运行结果：
