JS document内容及样式操作完整示例
人气:0本文实例讲述了JS document内容及样式操作。分享给大家供大家参考,具体如下:
<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>
运行结果:
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
- JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
- JavaScript中使用document.write向页面输出内容实例
- js ondocumentready onmouseover onclick onmouseout 样式
- 点击button获取text内容并改变样式的js实现
- javascript下for( in )语句 获得所有style 的【scrollbar】滚动条样式内容
- JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
- javascript dom追加内容实现示例
- JavaScript DOM操作表格及样式
- JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
加载全部内容