JS document內(nèi)容及樣式操作完整示例

更新時間：2020年01月14日 10:06:10 作者：qq_42412646

這篇文章主要介紹了JS document內(nèi)容及樣式操作,結(jié)合完整實(shí)例形式分析了JavaScript document內(nèi)容及樣式的獲取、修改、添加等相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JS document內(nèi)容及樣式操作。分享給大家供大家參考，具體如下：

<html>
    <head>
        <title>js-documnet元素內(nèi)容和樣式操作</title>
        <meta charset="UTF-8"/>
        
        <script type="text/javascript">
//            單標(biāo)簽屬性操作
//            固定屬性的操作
            function testOper1(){
//                獲取對象
                var inp=document.getElementById("uname");
                alert(inp.type+"::"+inp.name+"::"+inp.id+"::"+inp.value);    //可以直接用.直接獲取其內(nèi)部屬性
                alert(tt);   //不會報錯，其會顯示undefined
            }
            function testChange(){
//                獲取對象
                var inp=document.getElementById("uname");
                inp.type="button"   //對獲取的對象屬性值進(jìn)行修改
                inp.value="古河渚";
                alert(inp.value);   //輸出當(dāng)前數(shù)據(jù)的value值，當(dāng)沒用上面的重新賦值，會輸出用戶輸入的值，用戶也可以直接改變文本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");   //把指定的元素屬性進(jìn)行修改
                alert(inp.getAttribute("Animation"));       //屬性值變了，屬性哦ing名沒有變
      }
       function testextra3(){
//         獲取對象
                var inp=document.getElementById("uname");   //我們一般不會修改對象name值因?yàn)檫@是鍵值會與后臺進(jìn)行鏈接，也一般不改變id,因?yàn)槲覀円话阌胕d來進(jìn)行對象的獲取
                alert(inp.getAttribute("value"));     //輸出的是空，因?yàn)闆]有給value賦值，即使用戶端輸入也不行，用戶端不能在這種方式下改變標(biāo)簽的固定屬性值
                inp.setAttribute("value","CLANNAD");
                alert(inp.getAttribute("value"));     //和以上的操作一個效果
      }
       
//     雙標(biāo)簽內(nèi)部屬性測試
//            對于那些用兩個標(biāo)簽確定的，我們可以操作其內(nèi)部的內(nèi)容
//             雙標(biāo)簽的內(nèi)容操作
            function testOper2(){
//                獲取對象
                var div01=document.getElementById("div01");
                alert(div01.innerHTML);      //innerHTML獲取對象中的所有內(nèi)容，包括其對象的標(biāo)簽
                alert(div01.innerText);       //innerText獲取對象的文本內(nèi)容
            }
            function tsetChangeCssText(){
                var div01=document.getElementById("div01");
                div01.innerText="clannad 世界第一"         //單純的打印全部的文本內(nèi)容
                alert(div01.innerText); 
                div01.innerText=div01.innerText+"そうです";        //進(jìn)行文檔的拼接 
                alert(div01.innerText);
            }
            function tsetChangeCssText(){
                var div01=document.getElementById("div01");
                div01.innerHTML="<b>clannad 世界第一</b>"  //HTML是類型的數(shù)據(jù)可以在顯示的時候進(jìn)行執(zhí)行
                alert(div01.innerText);
                div01.innerHTML=div01.innerHTML+"<b>そうです</b>";     //進(jìn)行HTML數(shù)據(jù)的拼接
                alert(div01.innerText);
            }
//            雙標(biāo)簽的樣式操作
//            屬性直接操作樣式
            function testCssOper(){
                var div02=document.getElementById("div02");
                div02.style.backgroundColor="red";  //添加對象的背景顏色
                div02.style.border="solid 3px purple";  //修改對象的邊框?qū)傩?
                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元素內(nèi)容和樣式操作</h3>
        <h4>單標(biāo)簽操作</h4>
        <input type="button" name="" id="" value="測試單標(biāo)簽操作" onclick="testOper1()" />
        <input type="button" name="" id="" value="測試單標(biāo)簽修改操作" onclick="testChange()" />
        <input type="button" name="" id="" value="測試單標(biāo)簽添加操作" onclick="testAdd()" />
        <input type="button" name="" id="" value="測試單標(biāo)簽清空操作" onclick="testClear()" />
        <input type="button" name="" id="" value="測試單標(biāo)簽自定義屬性操作" onclick="testextra2()" />
        <input type="button" name="" id="" value="測試單標(biāo)簽自定義方法對固定屬性操作" onclick="testextra3()" />
        <hr />
        單標(biāo)簽測試 <br /><br />
        <input type="text" name="uname" id="uname" value="" Animation="clannad" />
        <hr />
        雙標(biāo)簽測試<br /><br />
        <input type="button" name="" id="" value="測試雙標(biāo)簽內(nèi)容操作" onclick="testOper2()" />
        <input type="button" name="" id="" value="測試雙標(biāo)簽內(nèi)容修改和添加操作" onclick="tsetChangeCssText()" />
        <input type="button" name="" id="" value="測試雙標(biāo)簽樣式一系列操作" onclick="testCssOper()" />
        <input type="button" name="" id="" value="測試雙標(biāo)簽樣式一系列操作--className" onclick="testCssOper2()" />
        <hr /><br />
        <div id="div01">
            <b>clannad 賽高！</b>
        </div>
        <div id="div02" class="common">
        </div>
    </body>
</html>

運(yùn)行結(jié)果：