现在的位置: 首页 > web前端 > 正文

JSdocument内容及样式操作完整示例

2020年02月18日 web前端 ⁄ 共 3948字 ⁄ 字号 评论关闭

本文实例讲述了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 p01=document.getElementById("p01"); alert(p01.innerHTML); //innerHTML获取对象中的所有内容,包括其对象的标签 alert(p01.innerText); //innerText获取对象的文本内容 } function tsetChangeCssText(){ var p01=document.getElementById("p01"); p01.innerText="clannad 世界第一" //单纯的打印全部的文本内容 alert(p01.innerText); p01.innerText=p01.innerText+"そうです"; //进行文档的拼接 alert(p01.innerText); } function tsetChangeCssText(){ var p01=document.getElementById("p01"); p01.innerHTML="<b>clannad 世界第一</b>" //HTML是类型的数据可以在显示的时候进行执行 alert(p01.innerText); p01.innerHTML=p01.innerHTML+"<b>そうです</b>"; //进行HTML数据的拼接 alert(p01.innerText); }// 双标签的样式操作// 属性直接操作样式 function testCssOper(){ var p02=document.getElementById("p02"); p02.style.backgroundColor="red"; //添加对象的背景颜色 p02.style.border="solid 3px purple"; //修改对象的边框属性 p02.style.backgroundColor="" //清空对象的背景颜色 }// className方式操作样式 function testCssOper2(){ var p02=document.getElementById("p02"); alert(p02.className); //获取 p02.className="common2"; //修改// p02.className=""; //清空 } </script> <style type="text/css"> #p01{ width: 200px; height: 200px; border: solid 2px yellow; } #p02{ 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 /> <p id="p01"> <b>clannad 赛高!</b> </p> <p id="p02" class="common"> </p> </body></html>

运行结果:

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.xuebuyuan.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

以上就上有关JSdocument内容及样式操作完整示例的全部内容,学步园全面介绍编程技术、操作系统、数据库、web前端技术等内容。

抱歉!评论已关闭.