JavaScript （十九）：DOM對象其它操做

1、輸出內容

document.write() 可用於直接向 HTML 輸出流寫內容。
簡單的說就是直接在網頁中輸出內容。

第一種：輸出內容 用 "" 括起，直接輸出 "" 號內的內容。

<script type="text/javascript">
  document.write("I love JavaScript！"); //內容用""括起來，""裏的內容直接輸出。
</script>

第二種：經過變量，輸出內容

<script type="text/javascript">
  var mystr="hello world!";
  document.write(mystr);  //直接寫變量名，輸出變量存儲的內容。
</script>

第三種：輸出多項內容，內容之間用+號鏈接。

<script type="text/javascript">
  var mystr="hello";
  document.write(mystr+"I love JavaScript"); //多項內容之間用+號鏈接
</script>

第四種：輸出 HTML 標籤，並起做用，標籤使用 "" 括起來。

<script type="text/javascript">
  var mystr="hello";
document.write(mystr+"<br>");//輸出hello後，輸出一個換行符
  document.write("JavaScript");
</script>

JS中如何輸出空格

問題 ：

在寫JS代碼的時候，你們能夠會發現這樣現象:

問題分析：

不管在輸出的內容中什麼位置有多少個空格，顯示的結果好像只有一個空格。 這是由於瀏覽器顯示機制，對手動敲入的空格，將連續多個空格顯示成1個空格。

解決方法：

1. 使用輸出 html標籤  來解決
2. 使用CSS樣式來解決 在輸出時添加white-space:pre;樣式屬性。這個樣式表示"空白會被瀏覽器保留"

2、innerHTML 屬性

innerHTML 屬性用於獲取或替換 HTML 元素的內容。

語法:

Object.innerHTML

注意:

1.Object是獲取的元素對象，如經過document.getElementById("ID")獲取的元素。

2.注意書寫，innerHTML區分大小寫。

咱們經過id="con"獲取<p> 元素，並將元素的內容輸出和改變元素內容，代碼以下:

結果:

3、改變 HTML 樣式

HTML DOM 容許 JavaScript 改變 HTML 元素的樣式。
如何改變 HTML 元素的樣式呢？

語法:

Object.style.property=new style;

**注意：**Object是獲取的元素對象，如經過document.getElementById("id")獲取的元素。

基本屬性表（property）:

注意：該表只是一小部分CSS樣式屬性，其它樣式也能夠經過該方法設置和修改。

看看下面的代碼:

改變 <p> 元素的樣式，將顏色改成紅色，字號改成20,背景顏色改成藍：

<p id="pcon">Hello World!</p>
<script>
   var mychar = document.getElementById("pcon");
   mychar.style.color="red";
   mychar.style.fontSize="20";
   mychar.style.backgroundColor ="blue";
</script>

**結果: **

5、顯示和隱藏（display 屬性）

網頁中常常會看到顯示和隱藏的效果，可經過display屬性來設置。

語法：

Object.style.display = value

注意:Object是獲取的元素對象，如經過document.getElementById("id")獲取的元素。

value取值:

看看下面代碼:

4、控制類名（className屬性）

className 屬性設置或返回元素的class 屬性。

語法：

object.className = classname

做用:

1.獲取元素的class 屬性

2. 爲網頁內的某個元素指定一個css樣式來更改該元素的外觀

看看下面代碼，得到 <p> 元素的 class 屬性和改變className：

結果:

編程：

請編寫 "改變顏色"、"改變寬高"、"隱藏內容"、"顯示內容"、"取消設置"的函數，點擊相應按鈕執行相應操做，點擊"取消設置"按鈕後，提示是否取消設置，如是執行操做，不然不作操做。

提示：

1、定義"改變顏色"的函數

obj.style.color
obj.style.backgroundColor

2、定義"改變寬高"的函數

obj.style.width
obj.style.height

3、定義"隱藏內容"的函數

obj.style.display="none";

4、定義"顯示內容"的函數

obj.style.display="block";

5、定義"取消設置"的函數

使用confirm()肯定框，來確認是否取消設置。
如是將以上全部的設置恢復原始值,不然不作操做。

6、當點擊相應按鈕，執行相應操做，爲按鈕添加相應事件