JS document內容及樣式操作完整示例
阿新 • • 發佈：2020-01-15
本文例項講述了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="clannad 世界第一" //HTML是型別的資料可以在顯示的時候進行執行
alert(div01.innerText);
div01.innerHTML=div01.innerHTML+"そうです"; //進行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">
clannad 賽高！
</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程式設計有所幫助。