JS document内容及样式操作完整示例

本文实例讲述了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>

运行结果：

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

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

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