recursal/MDN huggingface dataset:
Document.readyState
===================

`document` (en-US) 的 **`Document.readyState`** 屬性描述文件的讀取狀態。

### 數值

文件的 **readyState** 數值如下：

loading

`document` (en-US) 正在讀取中。

interactive

文件已經完成讀取和解析，但是其他的子資源，如「圖片樣式層次表」，仍然在讀取。這個狀態表示 `DOMContentLoaded` (en-US) 事件已經被觸發。

complete

文件及子資源都完成讀取。這個狀態表示 `load` (en-US) 事件即將被觸發。

當這個屬性的數值改變時， `readystatechange` (en-US) 事件在 `document` (en-US) 上觸發。

表達式
---


```js
var string = document.readyState;
```

範例
--

### 不同的狀態


```js
switch (document.readyState) {
  case "loading":
    // 文件讀取中。
    break;
  case "interactive":
    // 文件已經完成讀取。可以使用 DOM 元素。
    var span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // 頁面已經完成讀取。
    console.log(
      "The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText,
    );
    break;
}
```

### readystatechange 替代 DOMContentLoaded


```js
// alternative to DOMContentLoaded event
document.onreadystatechange = function () {
  if (document.readyState == "interactive") {
    initApplication();
  }
};
```

### readystatechange 替代 load


```js
// alternative to load event
document.onreadystatechange = function () {
  if (document.readyState == "complete") {
    initApplication();
  }
};
```

規範
--

| Specification |
| --- |
| HTML Standard # current-document-readiness |

參見
--

* 相關事件：
    + `readystatechange` (en-US)
    + `DOMContentLoaded` (en-US)
    + `load` (en-US)
Document.createElement()
========================

於 HTML 文件中，**`Document.createElement()`** 方法可以依指定的標籤名稱（`tagName`）建立 HTML 元素，或是在未定義標籤名稱下建立一個 `HTMLUnknownElement` (en-US)。在 XUL 文件中，`Document.createElement()` 將會建立指定的 XUL 元素。而在其它文件，則會建立一個 namespace URI 為 `null` 的元素。

若要明確指定元素的 namespace URI，請使用 `document.createElementNS()` (en-US)。

語法
--


```js
var element = document.createElement(tagName[, options]);
```

### 參數

`tagName`

一個指定類型給所創建的元素的字串。`nodeName` (en-US) 創建的元素由 `tagName` 的值初始，不要使用吻合名稱（例如 "html:a"）。當該方法在 HTML 文件中被調用時，`createElement()` 會先將 `tagName` 轉化為小寫後再創建元素。在 Firefox、Opera 和 Chrome，`createElement(null)` 與 `createElement("null")` 作用相同。

`options`選擇性

選擇性 `ElementCreationOptions` 物件包含一個屬性 `is`，它的值是先前使用`customElements.define()` 所定義的自定義元素的標籤名稱。為了與以前的 自定義元素規範 相容，一些瀏覽器將允許你在此傳遞一個字串而非物件，其字串的值就是自定義元件的標籤名稱。了解更多訊息以及如何使用此參數，可以參閱 擴展原生 HTML 元素。新元素將被賦予一個 `is` 屬性，其值就是自定義元素的標籤名稱。自定義元素算是實驗中的功能，因此目前只作用於部分瀏覽器中。

### 回傳值

一個新的 `Element` (en-US).

範例
--

這邊創建一個新的 `<div>` ，並將它插入到 ID `div1` 之前。

### HTML


```html
<!doctype html>
<html>
  <head>
    <title>||Working with elements||</title>
  </head>
  <body>
    <div id="div1">The text above has been created dynamically.</div>
  </body>
</html>
```

### JavaScript


```js
document.body.onload = addElement;

function addElement() {
  // create a new div element
  // and give it some content
  var newDiv = document.createElement("div");
  var newContent = document.createTextNode("Hi there and greetings!");
  newDiv.appendChild(newContent); //add the text node to the newly created div.

  // add the newly created element and its content into the DOM
  var currentDiv = document.getElementById("div1");
  document.body.insertBefore(newDiv, currentDiv);
}
```

規範
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-createelement① |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

參見
--

* `Node.removeChild()`
* `Node.replaceChild()` (en-US)
* `Node.appendChild()` (en-US)
* `Node.insertBefore()` (en-US)
* `Node.hasChildNodes()` (en-US)
Document.defaultView
====================

在瀏覽器中，**`document.defaultView`** 屬性會指向一個目前 document 所屬的 `window` (en-US) 物件，若無則為 `null`。

語法
--
```

var win = document.defaultView;
```


此為唯讀屬性。

規範
--

| Specification |
| --- |
| HTML Standard # dom-document-defaultview-dev |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Document.designMode
===================

概要
--

`document.designMode` 控制整個文件是否能夠編輯。可用的數值是 `"on"` 和 `"off"`。根據規範，這個屬性預設值為 `"off"`。Firefox 遵從這個標準。較早以前的 Chrome 和 IE 預設值是 `"inherit"`。從 Chrome 43 起，預設值是 「`off`」；不再支援「`inherit`」。在 IE6-10 中，數值為大寫英文字母。

語法
--


```js
var mode = document.designMode;
document.designMode = "on";
document.designMode = "off";
```

範例
--

讓 `<iframe>` (en-US) 的文件可以給使用者編輯：
```

iframeNode.contentDocument.designMode = "on";
```

規範
--

| Specification |
| --- |
| HTML Standard # dom-document-designmode-dev |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

參考
--

* Rich-Text Editing in Mozilla
* `HTMLElement.contentEditable` (en-US)
* designMode property on MSDN
document.querySelector
======================

摘要
--

回傳 document 第一個符合特定選擇器群組的元素（採用深度優先，前序追蹤 document 節點）。

語法
--
```

element = document.querySelector(selectors);
```


其中

* `element` 是元素 (en-US)物件。
* `selectors` 是以逗號分隔，包含一個或多個 CSS 選擇器的字串。
範例
--

這個範例會回傳 document 選到的第一個 "`myclass`" class：


```js
var el = document.querySelector(".myclass");
```

注意事項
----

若找不到相應元素就會回傳 `null`，否則回傳第一個符合的元素。

若選擇器符合某 ID，且該 ID 在 document 中誤用數次，就會回傳第一個符合的元素。

當特定選擇器群組無效，會擲回 `SYNTAX_ERR` 例外狀況。

`querySelector()` 是由 Selectors API 引入的選擇器。

傳入 `querySelector` 的字串參數必須遵循 CSS 語法。若要選取未遵循 CSS 語法的 ID 或選擇器（例如不當使用冒號或空格），必須強制加上兩個反斜線來跳脫錯誤的字元：


```html
<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
 document.querySelector("#foo\bar"); // 甚麼都沒選到
 document.querySelector("#foo\\\\bar"); // 選到第一個 div
 document.querySelector("#foo:bar"); // 甚麼都沒選到
 document.querySelector("#foo\\:bar"); // 選到第二個 div
</script>
```

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

規格文件
----

* Selectors API
詳見
--

* `document.querySelectorAll()` (en-US)
* `element.querySelector()` (en-US)
* `element.querySelectorAll()` (en-US)
* querySelector 代碼片段
Document.getElementsByClassName()
=================================

針對所有給定的 class 子元素，回傳類似陣列的物件。當呼叫 document 物件時，它會搜尋整個文件，包括根節點在內。你也可以在所有元素呼叫 `getElementsByClassName()` (en-US)，那它就只會回傳含有給定 class 的特定根元素的後代元素。

表達式
---
```

var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names);
```


* *elements* 為符合 class 名稱的 `HTMLCollection` (en-US)。
* *names* 為符合 class 名稱的字串；class 名稱可以用空白分隔。
* getElementsByClassName 可以被任何不只在 document 的元素呼叫。呼叫這個方法的元素將會成為搜尋 class 的根元素。
範例
--

取得所有 class 為 「test」 的元素：


```js
document.getElementsByClassName("test");
```


取得所有 class 為 「test」 和 「red」 的元素：


```js
document.getElementsByClassName("red test");
```


取得所有在 id 為 '「main」 的元素裡 class 為 「test」 的元素：


```js
document.getElementById("main").getElementsByClassName("test");
```


我們也可以藉由傳遞 `HTMLCollection` (en-US) 為 \*this \*來使用 `Array.prototype` 的方法。下面的例子將會找到所有 class 為 「test」 的 div 元素：


```js
var testElements = document.getElementsByClassName("test");
var testDivs = Array.prototype.filter.call(
  testElements,
  function (testElement) {
    return testElement.nodeName === "DIV";
  },
);
```

取得 class 是 test 的元素
-------------------

這是最常用的操作方法：
```

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="parent-id">
        <p>hello word1</p>
        <p class="test">hello word2</p>
        <p>hello word3</p>
        <p>hello word4</p>
    </div>
    <script>
        var parentDOM = document.getElementById("parent-id");

        var test=parentDOM.getElementsByClassName("test");//test is not target element
        console.log(test);//HTMLCollection[1]

        var testTarget=parentDOM.getElementsByClassName("test")[0];//year , this element is target
        console.log(testTarget);//<p class="test">hello word2</p>
    </script>
</body>
</html>
```

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

規範
--

* W3C: getElementsByClassName
Document.documentElement
========================

**`Document.documentElement`** 會回傳目前文件（`document` (en-US)）中的根元素（`Element` (en-US)），如：HTML 文件中的 `<html>` 元素。

語法
--
```

var element = document.documentElement;
```

範例
--


```js
var rootElement = document.documentElement;
var firstTier = rootElement.childNodes;

// firstTier is the NodeList of the direct children of the root element
for (var i = 0; i < firstTier.length; i++) {
  // do something with each direct kid of the root element
  // as firstTier[i]
}
```

備註
--

對於所有非空的 HTML 文件， `document.documentElement` 將會是一個 `<html>` (en-US) 元素 ; 對於所有非空的 XML 文件，`document.documentElement` 則會是文件的根元素。

規範
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-documentelement① |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Document.createTextNode()
=========================

創建一個新的文字節點.

Syntax
------
```

var text = document.createTextNode(data);
```


* 文字屬於一個文字節點.
* 將含有數據的串加入文字節點中.
Example
-------


```js
<!DOCTYPE html>
<html lang="en">
<head>
<title>createTextNode example</title>
<script>
function addTextNode(text) {
  var newtext = document.createTextNode(text),
      p1 = document.getElementById("p1");

  p1.appendChild(newtext);
}
</script>
</head>

<body>
  <button onclick="addTextNode('YES! ');">YES!</button>
  <button onclick="addTextNode('NO! ');">NO!</button>
  <button onclick="addTextNode('WE CAN! ');">WE CAN!</button>

  <hr />

  <p id="p1">First line of paragraph.</p>
</body>
</html>
```

Specifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-createtextnode① |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Document.createDocumentFragment()
=================================

建立新的 `DocumentFragment`.

語法
--
```

var fragment = document.createDocumentFragment();
```


`fragment` 是 `DocumentFragment` 的一個參考物件。

描述
--

`DocumentFragment`s 是 DOM 節點(Nodes)。他們不會成為 DOM 主幹的一部份。最常見的作法是先建立文本片段 (document fragment)，然後將元素 (element) 加入文本片段中，最後再將文本片段加入 DOM 樹中。在 DOM 樹中，文本片段將會被他所有的子元素取代。

正因為文本片段是存在**記憶體**中，並且不是 DOM 主幹的一部分，增加子元素並不會導致網頁重刷 (reflow)(重新計算元素的位置和幾何)。因此採用文本片段通常會有比較好的效能表現 (better performance)。

舉例
--

這個例子中用清單來呈現主流瀏覽器。

### HTML


```html
<ul id="ul"></ul>
```

### JavaScript


```js
var element = document.getElementById("ul"); // assuming ul exists
var fragment = document.createDocumentFragment();
var browsers = ["Firefox", "Chrome", "Opera", "Safari", "Internet Explorer"];

browsers.forEach(function (browser) {
  var li = document.createElement("li");
  li.textContent = browser;
  fragment.appendChild(li);
});

element.appendChild(fragment);
```

### 結果

在 jsfiddle 上看範例結果。

規格
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-createdocumentfragment① |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

更多參考
----

* `document.implementation.createDocument()` (en-US)
* `documentFragment`
CustomEvent()
=============

`CustomEvent()` constructor 可用來建立 `CustomEvent`物件。

語法
--


```javascript
new CustomEvent(type);
new CustomEvent(type, options);
```

### 參數

`type`

一個 `DOMString` 用來表示事件名稱。

`options`選擇性

一個繼承自`Event()`的參數，其類型為 object。它有以下參數

`detail` 選擇性

 用來表示事件相關的資訊。它能藉由 `CustomEvent.detail` (en-US) 屬性來取得值。
 其默認值為`null`。



回傳值
---

一個 `CustomEvent` 物件。

範例
--


```javascript
// create custom events
const catFound = new CustomEvent("animalfound", {
  detail: {
    name: "cat",
  },
});
const dogFound = new CustomEvent("animalfound", {
  detail: {
    name: "dog",
  },
});
// add an appropriate event listener
obj.addEventListener("animalfound", (e) => console.log(e.detail.name));
// dispatch the events
obj.dispatchEvent(catFound);
obj.dispatchEvent(dogFound);
// "cat" and "dog" logged in the console
```


可於 Creating and triggering events 找到更多範例。

規格
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-customevent-customevent |

瀏覽器支援度
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

其他
--

### 添加額外參數

 在 Internet Explorer 9 或更高的版本，你可以用以下的方法給
 `CustomEvent()` constructor 添加額外參數


```javascript
(function () {
  function CustomEvent(event, params) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = document.createEvent("CustomEvent");
    evt.initCustomEvent(
      event,
      params.bubbles,
      params.cancelable,
      params.detail,
    );
    return evt;
  }

  CustomEvent.prototype = window.Event.prototype;

  window.CustomEvent = CustomEvent;
})();
```

延伸閱讀
----

* `CustomEvent`
* Creating and triggering events
AnalyserNode.getByteFrequencyData()
===================================

`AnalyserNode` (en-US) 介面的 **`getByteFrequencyData()`** 方法會將當前的頻率資料複製到 `Uint8Array` (en-US) （無號 byte 陣列）。

如果陣列的元素數目比 `AnalyserNode.frequencyBinCount` (en-US) 少的話，多餘的元素會被 drop 掉。如果比需要的少的話，多餘的元素會被忽略。

語法
--


```js
var audioCtx = new AudioContext();
var analyser = audioCtx.createAnalyser();
var dataArray = new Uint8Array(analyser.frequencyBinCount); // Uint8Array 應該要和 frequencyBinCount 等長
analyser.getByteFrequencyData(dataArray); // 將 getByteFrequencyData() 回傳的資料放進 Uint8Array
```

### 回傳值

`Uint8Array` (en-US)。

範例
--

下面的範例顯示出 `AudioContext` (en-US) 用於建立一個 `AnalyserNode` 的基本用法，然後 `requestAnimationFrame` 以及 `<canvas>` 用來重複收集當前聲音輸入的頻率資料並在 "winamp bargraph style" 畫出輸出。若要知道更完整的範例或是資訊，請參考 Voice-change-O-matic demo （看 app.js 第 128–205 行 會有相關的程式碼）。


```js
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();

  ...

analyser.fftSize = 256;
var bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
var dataArray = new Uint8Array(bufferLength);

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

function draw() {
  drawVisual = requestAnimationFrame(draw);

  analyser.getByteFrequencyData(dataArray);

  canvasCtx.fillStyle = 'rgb(0, 0, 0)';
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

  var barWidth = (WIDTH / bufferLength) \* 2.5;
  var barHeight;
  var x = 0;

  for(var i = 0; i < bufferLength; i++) {
    barHeight = dataArray[i];

    canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
    canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);

    x += barWidth + 1;
  }
};

draw();
```

參數
--

陣列

頻率定義域會被複製進去的 `Uint8Array` (en-US) 。

規範
--

| Specification |
| --- |
| Web Audio API # dom-analysernode-getbytefrequencydata |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

參看
--

* 使用 Web Audio API (en-US)
Window.requestAnimationFrame()
==============================

\*\*`window.requestAnimationFrame()`\*\*方法通知瀏覽器我們想要產生動畫，並且要求瀏覽器在下次重繪畫面前呼叫特定函數更新動畫。這個方法接受一個引數作為下次重繪前調用的回呼函數。

**備註：** 若是想要在下次重繪時產生另一個動畫，這個回呼函數內必須自行呼叫 requestAnimationFrame()。

當準備好更新頁面上的動畫時應當呼叫這個方法。這表示向瀏覽器請求在下次重繪前呼叫這個動畫函數。回呼的次數通常落在每秒 60 次，但通常會根據 W3C 的建議符合多數瀏覽器重新整理的頻率。當頁面處於背景或隱藏狀態時 `<iframe>` (en-US) ，多數的瀏覽器會暫停 `requestAnimationFrame()` 的呼叫，從而改善效能表現及電池壽命。

回呼方法會得到一個 `DOMHighResTimeStamp` (en-US) 的引數，作為指示目前的時間（基於 time origin (en-US) 之後經過的毫秒數）。當 `requestAnimationFrame()` 佇列了數個回呼並且在同一幀開始觸發多個回呼時，儘管每一個之前的回呼在運作時會消耗一定的時間，但它們都會取得同樣的時間戳記。時間戳記是由十進位數字表示的毫秒且最小的精準度為 1 毫秒（1000 µs）。

語法
--
```

window.requestAnimationFrame(callback);
```

### 參數

`回呼`

當下次重新繪製時用於呼叫並更新動畫。回呼函數會得到一個引數—— `DOMHighResTimeStamp` (en-US) ——類似於由 `performance.now()` (en-US) 回傳的結果，其用於指示當 `requestAnimationFrame()` 開始執行回呼函數的時間。

### 回傳值

`long` 型別的整數值表示請求的 id，作為其進入回呼清單中的唯一識別。雖然回傳值是一個非零值，但不應該對其有其他任何的假設。將這個值傳遞給 `window.cancelAnimationFrame()` (en-US) 可以取消重新整理頁面回呼的請求

範例
--


```js
var start = null;
var element = document.getElementById("SomeElementYouWantToAnimate");

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.transform =
    "translateX(" + Math.min(progress / 10, 200) + "px)";
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);
```

備註
--

Edge 低於 17 的版本和 Internet Explorer 無法保證在繪製循環前觸發 `requestAnimationFrame`。

規格
--

| Specification |
| --- |
| HTML Standard # dom-animationframeprovider-requestanimationframe |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

其他參考
----

* `Window.mozAnimationStartTime` (en-US)
* `Window.cancelAnimationFrame()` (en-US)
* mozRequestAnimationFrame - Blog post
* requestAnimationFrame for smart animating - Blog post
* Animating with javascript: from setInterval to requestAnimationFrame - Blog post
* Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1 - Blog post
* TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations
* Paul Irish: requestAnimationFrame API: now with sub-millisecond precision
HTMLCanvasElement.toDataURL()
=============================

**`HTMLCanvasElement.toDataURL()`** 方法回傳含有圖像和參數設置特定格式的 data URIs (en-US) (預設 PNG). 回傳的圖像解析度為 96 dpi.

* 如果 canvas 的高度或是寬度為 `0`, 將會回傳字串 `"data:,"`.
* 如果要求的圖像類型並非 `image/png`, 但是回傳的類型卻是 `data:image/png`, 表示要求的圖像類型並不支援.
* Chrome 也支援 `image/webp` 類型.
表達式
---
```

canvas.toDataURL(type, encoderOptions);
```

### 參數

`type` 選擇性

圖像格式的 `DOMString`. 預設為 `image/png`.

`encoderOptions` 選擇性

`表示 image/jpeg 或是 image/webp 的圖像品質, 為0` 到 `1` 之間的 `Number`.
 如果值不在上述範圍中, 將會使用預設值. 其他的會忽略.


### 回傳值

包含 data URI (en-US) 的 `DOMString`.

範例
--

創建 `<canvas>` 元素:


```html
<canvas id="canvas" width="5" height="5"></canvas>
```


可以使用下面的方式獲取 data-URL:


```js
var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
```

### 設置圖像的品質


```js
var fullQuality = canvas.toDataURL("image/jpeg", 1.0);
// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
var mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
var lowQuality = canvas.toDataURL("image/jpeg", 0.1);
```

### 範例: 動態改變圖像

為了動態改變圖像, 可以與滑鼠事件一起使用 (gray-scale versus color in this example):

#### HTML


```html
<img class="grayscale" src="myPicture.png" alt="Description of my picture" />
```


#### JavaScript


```js
window.addEventListener("load", removeColors);

function showColorImg() {
  this.style.display = "none";
  this.nextSibling.style.display = "inline";
}

function showGrayImg() {
  this.previousSibling.style.display = "inline";
  this.style.display = "none";
}

function removeColors() {
  var aImages = document.getElementsByClassName("grayscale"),
    nImgsLen = aImages.length,
    oCanvas = document.createElement("canvas"),
    oCtx = oCanvas.getContext("2d");
  for (
    var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0;
    nImgId < nImgsLen;
    nImgId++
  ) {
    oColorImg = aImages[nImgId];
    nWidth = oColorImg.offsetWidth;
    nHeight = oColorImg.offsetHeight;
    oCanvas.width = nWidth;
    oCanvas.height = nHeight;
    oCtx.drawImage(oColorImg, 0, 0);
    oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);
    aPix = oImgData.data;
    nPixLen = aPix.length;
    for (nPixel = 0; nPixel < nPixLen; nPixel += 4) {
      aPix[nPixel + 2] =
        aPix[nPixel + 1] =
        aPix[nPixel] =
          (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
    }
    oCtx.putImageData(oImgData, 0, 0);
    oGrayImg = new Image();
    oGrayImg.src = oCanvas.toDataURL();
    oGrayImg.onmouseover = showColorImg;
    oColorImg.onmouseout = showGrayImg;
    oCtx.clearRect(0, 0, nWidth, nHeight);
    oColorImg.style.display = "none";
    oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);
  }
}
```

規範
--

| Specification |
| --- |
| HTML Standard # dom-canvas-todataurl-dev |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

參見
--

* The interface defining it, `HTMLCanvasElement` (en-US).
* Data URIs (en-US) in the HTTP reference.
UIEvent()
=========

**`UIEvent()`** constructor 是用來建立新的 `UIEvent`。

語法
--
```

 event = new UIEvent(typeArg, UIEventInit);
```

### 參數

*typeArg*

一個 `DOMString` ，用來表示事件名稱

*UIEventInit*選擇性

一個 `UIEventInit` dictionary ，能接受以下參數：

`detail`

定義事件意義的值（類型：`long`，默認值：`0`）。關於事件的意義於 `UIEvent.detail` (en-US) 已有較詳盡的列表。

`view`

與事件相關的 `Window` (en-US)，默認值：`null`。


規格
--

| Specification |
| --- |
| UI Events # dom-uievent-uievent |

瀏覽器支援度
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

延伸閱讀
----

* `UIEvent`，此 constructer 所建立的 object 的 interface。
Element.clientHeight
====================

**`Element.clientHeight`** 唯讀屬性會回傳元素內部高度（像素），包含 padding 但並未包含水平滾動條、border、margin。

`clientHeight` 可以被計算成 CSS `height` + CSS `padding` - 水平滾動條的高度（如果有顯示）

**備註：** 這個屬性會以四捨五入進位取整數. 如果要使用非整數值, 使用 `element.getBoundingClientRect()` (en-US).

表達式
---
```

var h = element.clientHeight;
```


`h` 代表元素高度(pixels)的正整數.

範例
--

![Image:Dimensions-client.png](/zh-TW/docs/Web/API/Element/clientHeight/dimensions-client.png)

規範
--

| Specification |
| --- |
| CSSOM View Module # dom-element-clientheight |

### 註

`clientHeight` 是在 the Internet Explorer 物件介紹的屬性.

參見
--

* `HTMLElement.offsetHeight` (en-US)
* `Element.scrollHeight`
* Determining the dimensions of elements (en-US)
* MSDN Measuring Element Dimension and Location
Document.width
==============

**已棄用:** 不推薦使用此功能。雖可能有一些瀏覽器仍然支援它，但也許已自相關的網頁標準中移除、正準備移除、或僅為了維持相容性而保留。避免使用此功能，盡可能更新現有程式；請參考頁面底部的相容性表格來下決定。請注意：本功能可能隨時停止運作。

**備註：** 從 Gecko 6.0 開始， `document.width` 將不再被支援。取而代之的是 `document.body.clientWidth`。請參照：`element.clientWidth`.

傳回目前文件中，`<body>` (en-US) 元素的寬度有多少像素。

Internet Explorer 不支援！

語法
--


```js
pixels = document.width;
```

範例
--


```js
function init() {
  alert("文件的寬度是 " + document.width + " 像素。");
}
```

其他替代
----


```js
document.body.clientWidth; /\* <body> 的寬度 \*/
document.documentElement.clientWidth; /\* <html> 的寬度 \*/
window.innerWidth; /\* 視窗的寬度 \*/
```

規範於
---

HTML5

同時參考
----

* `document.height` (en-US)
* `Element.clientWidth`
* `Element.scrollWidth` (en-US)
keyup
=====

當鍵盤上的手指離開按鍵時，`keyup事件會被觸發。`

基本資料
----

詳述

DOM L3

介面

KeyboardEvent (en-US)

Bubbles

Yes

Cancelable

Yes

Target

網頁文件, 網頁元素

Default Action

None

屬性
--

| Specification |
| --- |
| UI Events # event-type-keyup |
| HTML Standard # handler-onkeyup |

Related Events
--------------

* `keydown` (en-US)
* `keyup`
* `keypress` (en-US)
* `input` (en-US)
Element.scrollTop
=================

**`Element.scrollTop`** 屬性可以設置和獲取元素被向上捲動的高度(pixels). 元素的 `scrollTop` 是元素頂端和能被看見的最頂端之間的距離. 當元素並未產生滾動條, 那麼 `scrollTop` 的值預設為 `0`.

表達式
---


```js
// 獲得已經被滾動的距離(pixels)
var intElemScrollTop = someElement.scrollTop;
```


`intElemScrollTop` 為 `element` (en-US)已經被滾動的距離(pixels ).


```js
// 設置已經被滾動的距離(pixels)
element.scrollTop = intValue;
```


`scrollTop` 可以被設置為任何和正整數, 注意事項:

* 如果元素不能滾動, `scrollTop` 被設置為 `0`.
* 如果設置的值小於 `0`, `scrollTop` 被設置為 `0`.
* 如果設置的值大於內容可以被滾動的距離, `scrollTop` 被設置為最大值.
範例
--

### Scrolling an element

In this example, try scrolling the inner container with the dashed border, and see how the value of `scrollTop` changes.

#### HTML


```html
<div id="container">
  <div id="scroller">
    <p>
      Far out in the uncharted backwaters of the unfashionable end of the
      western spiral arm of the Galaxy lies a small unregarded yellow sun.
      Orbiting this at a distance of roughly ninety-two million miles is an
      utterly insignificant little blue green planet whose ape-descended life
      forms are so amazingly primitive that they still think digital watches are
      a pretty neat idea.
    </p>
  </div>
</div>

<div id="output">scrollTop: 0</div>
```


#### CSS


```css
#scroller {
  overflow: scroll;
  height: 150px;
  width: 150px;
  border: 5px dashed orange;
}

#output {
  padding: 1rem 0;
}
```


#### JavaScript


```js
const scroller = document.querySelector("#scroller");
const output = document.querySelector("#output");

scroller.addEventListener("scroll", (event) => {
  output.textContent = `scrollTop: ${scroller.scrollTop}`;
});
```


#### 結果

規範
--

| Specification |
| --- |
| CSSOM View Module # dom-element-scrolltop |

參閱
--

* W3C Draft CSSOM View Module
* MSDN's scrollTop definition
* MSDN's Measuring Element Dimension and Location