web開發常見問題集錦

阿新 • • 發佈：2019-01-13

1.JS控制HTML元素的顯示和隱藏

利用來JS控制頁面控制元件顯示和隱藏有兩種方法，兩種方法分別利用HTML的style中的兩個屬性，兩種方法的不同之處在於控制元件隱藏後是否還在頁面上佔空位。

方法一：

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getElementById</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"EleId"</span>)<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.style</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.visibility</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"hidden"</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getElementById</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"EleId"</span>)<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.style</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.visibility</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"visible"</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

利用上述方法實現隱藏後，頁面的位置還被控制元件佔用，顯示空白。

方法二：

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getElementById</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"EleId"</span>)<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.style</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.display</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"none"</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getElementById</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"EleId"</span>)<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.style</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.display</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"inline"</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

利用上述方法實現隱藏後，頁面的位置不被佔用。

2.document.documentElement是什麼，和document.body的區別？

document是HTML DOM中的文件物件，指代載入瀏覽器的 HTML文件。document 物件使我們可以從指令碼中對 HTML 頁面中的所有元素進行訪問。
注意：Document 物件是 BOM中Window 物件的一部分，可通過 window.document 屬性對其進行訪問。

documentElement 屬性可返回文件的根節點。body是DOM中document物件裡的body子節點，即 <body>標籤；

documentElement 是整個節點樹的根節點root，即<html>

標籤；

DOM把層次中的每一個物件都稱之為節點，就是一個層次結構，你可以理解為一個樹形結構，就像我們的目錄一樣，一個根目錄，根目錄下有子目錄，子目錄下還有子目錄。

以HTML超文字標記語言為例：整個文件的一個根就是,在DOM中可以使用document.documentElement來訪問它，它就是整個節點樹的根節點。而body是子節點，要訪問到body標籤，在指令碼中應該寫：document.body。

3.為什麼浮動元素可以撐開父級容器？

為什麼浮動元素可以撐開父級容器，浮動的元素不是已經脫離文件流，不佔用父容器的空間了嗎？

原來，如果對父容器同時進行浮動，那麼浮動的元素就可以撐開浮動的父容器了。已經在IE9+（包含IE9）和Chrome中得到驗證。

參考如下驗證的程式碼：

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-doctype" style="color: rgb(102, 0, 102); box-sizing: border-box;"><!doctype html></span>

<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">html</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">head</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">head</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">id</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"box"</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">id</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"box1"</span>></span>
            <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span>jsadfasdjfsjdflfakfaslfasjflkajdsklajfhkda;lklj;s<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>

<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">style</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/css"</span>></span><span class="css" style="box-sizing: border-box;">
        <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">p</span><span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">float</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);">left</span></span>;<span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
        <span class="hljs-id" style="box-sizing: border-box; color: rgb(155, 112, 63);">#box1</span><span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">float</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);">left</span></span>;<span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
</span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">style</span>></span>

<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">html</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li></ul>

上面的#box1高度是由子元素<p>的高度決定的，即浮動的<p>撐開了浮動的父級元素#box1。

4.JS獲取可視視窗、html文件、body的高度和寬度

高度的獲取：

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-doctype" style="color: rgb(102, 0, 102); box-sizing: border-box;"><!doctype html></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">html</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">head</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">head</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>

<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">style</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/css"</span>></span><span class="css" style="box-sizing: border-box;">
        *<span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">margin</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">0</span></span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">padding</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">0</span></span></span>;<span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
        <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">html</span><span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">border</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">1</span>px solid red</span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">height</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">1000</span>px</span></span>;<span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
        <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">body</span><span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">border</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">1</span>px solid red</span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">height</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">500</span>px</span></span>;<span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
</span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">style</span>></span>

<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span><span class="javascript" style="box-sizing: border-box;">
    alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"window.innerHeight:"</span>+window.innerHeight);
    alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"document.documentElement:"</span>+document.documentElement.offsetHeight);
    alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"document.body.offsetHeight:"</span>+document.body.offsetHeight);
</span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">html</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li></ul>

寬度的獲取：

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.innerWidth</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;//可視視窗寬度</span>
document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.documentElement</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.offsetWidth</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;//html文件寬度</span>
document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.body</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.offsetWidth</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;//body元素寬度</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

下面附上網友的總結，可以放到瀏覽器中試一下，加深理解。

<code class="hljs ruby has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">alert(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span>window).height());                           <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>瀏覽器當前視窗可視區域高度
alert(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span>document).height());                        <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>瀏覽器當前視窗文件的高度
alert(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span>document.body).height());                <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>瀏覽器當前視窗文件body的高度
alert(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span>document.body).outerHeight(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>));  <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>瀏覽器當前視窗文件body的總高度 包括border padding margin
alert(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span>window).width());                            <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>瀏覽器當前視窗可視區域寬度
alert(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span>document).width());                        <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>瀏覽器當前視窗文件物件寬度
alert(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span>document.body).width());                <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>瀏覽器當前視窗文件body的寬度
alert(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span>document.body).outerWidth(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>));  <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>瀏覽器當前視窗文件body的總寬度 包括border padding margin</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">網頁可見區域寬[僅針對body]： document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.body</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.clientWidth</span>
網頁可見區域高[僅針對body]： document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.body</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.clientHeight</span>
網頁可見區域寬[僅針對body]： document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.body</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.offsetWidth</span> (包括滾動條和邊框，若滾動條和邊框為<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>，則和clientWidth相等)
網頁可見區域高[僅針對body]： document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.body</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.offsetHeight</span> (包括滾動條和邊框，若滾動條和邊框為<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>，則和clientHeight相等)
可視視窗寬度(包括滾動軸寬度)：window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.innerWidth</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">; //IE9+、Chrome、Firefox、Opera 以及 Safari</span>
可視視窗高度，不包括瀏覽器頂部工具欄： window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.innerHeight</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;//IE9+、Chrome、Firefox、Opera 以及 Safari</span>
網頁正文全文寬(不包括滾動軸的寬度)： document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.body</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.scrollWidth</span>
網頁正文全文高：document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.body</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.scrollHeight</span>
//假如網頁中沒有滾動軸，document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.body</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.scrollWidth</span>和window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.innerWidth</span>相等，document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.body</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.scrollHeight</span>和window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.innerHeight</span>相等。
網頁被捲去的高： document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.body</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.scrollTop</span>
網頁被捲去的左： document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.body</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.scrollLeft</span>
網頁正文部分上： window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.screenTop</span>
網頁正文部分左： window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.screenLeft</span>
螢幕解析度的高（整個螢幕的高度）： window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.screen</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.height</span>
螢幕解析度的寬（整個螢幕的寬度）： window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.screen</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.width</span>
螢幕可用工作區高度： window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.screen</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.availHeight</span>
螢幕可用工作區寬度： window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.screen</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.availWidth</span>
整個瀏覽器可用工作區高度： window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.outerHeight</span>
整個瀏覽器可用工作區寬度： window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.outerWidth</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li></ul>

5.如何使固定定位的元素（position:fixed）的元素垂直水平居中在瀏覽器可視視窗中央？

使用固定定位時，元素的定位的參考物件是瀏覽器可視視窗，不是body，請切記。此時，使用margin:0 auto;已經沒有效果。

此時，只能使用CSS的top和left屬性進行定位。這裡需要一點計算。計算公式如下：

<code class="hljs ini has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-setting" style="box-sizing: border-box;">top=<span class="hljs-value" style="box-sizing: border-box;">n%;</span></span>
<span class="hljs-setting" style="box-sizing: border-box;">n=<span class="hljs-value" style="box-sizing: border-box;">(視窗高度-元素高度)/<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>);</span></span>

<span class="hljs-setting" style="box-sizing: border-box;">left=<span class="hljs-value" style="box-sizing: border-box;">n%;</span></span>
<span class="hljs-setting" style="box-sizing: border-box;">n=<span class="hljs-value" style="box-sizing: border-box;">(視窗寬度-元素寬度)/<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>);</span></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

6.html中如何鍵入兩個漢字空格？

空格的替代符號有以下幾種：

<code class="hljs bash has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">名稱      編號      描述  
&nbsp;   &<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">#160;   半形空格（1個ASCII碼字元寬度）</span>
&ensp;   &<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">#8194;  半形空格（當前字型的大寫字母“N”的寬度）</span>
&emsp;   &<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">#8195;  全形空格（當前字型的大寫字母“M”的寬，相當於一個漢字寬度）</span>
&thinsp; &<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">#8201;  窄空白（小於1個ASCII碼字元寬度） </span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

所以，要想鍵入一個漢字寬的空格使用&emsp;字元實體，段落開頭的縮排也是採用em作為長度單位。縮排的方式是設定CSS屬性”text-indent:2em;”。

7.js在函式中申明變數可以不用var嗎？

（1）在函式內部申明變數
是可以不用var來申明變數，但是有很大的區別。有var和沒var宣告的變數是不一樣的。有var宣告的是區域性變數，沒var的，宣告的全域性變數，所以可以藉此向外暴露介面東東。參考如下程式碼：

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/javascript"</span>></span><span class="javascript" style="box-sizing: border-box;">
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//函式內部申明全域性變數</span>
    <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">test</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
        lvlv=<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>;
    }
    test(); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//需要執行函式來申明全部變數lvlv</span>
    alert(lvlv);  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//輸出1</span>

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//函式內部申明區域性變數</span>
    <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">test1</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> local=<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>;
    }
    test1();
    alert(local); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//報錯，local is not defined</span>
</span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span>   </code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li></ul>

（2）在全域性作用域內申明變數
有var和沒var宣告的變數看一起是一樣，但是也是不一樣的。我們知道，宣告的全域性變數，就是window的屬性，究竟是否一樣，我們通過ECMAScrpit5提供的屬性的特性查詢方法，來發現之間的區別。

<code class="hljs coffeescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    <span class="hljs-reserved" style="box-sizing: border-box;">var</span> fff = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>; 
    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">window</span>.ffa = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span>; 
    ffb = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>; 
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.ffc = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>; 
    <span class="hljs-reserved" style="box-sizing: border-box;">var</span> ffftx = Object.getOwnPropertyDescriptor(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">window</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'fff'</span>); <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">configurable</span>:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">false</span>,<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">enumerable</span>:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>,<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">value</span>:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>,<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">writable</span>:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span> 
    <span class="hljs-reserved" style="box-sizing: border-box;">var</span> ffatx = Object.getOwnPropertyDescriptor(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">window</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ffa'</span>); <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">configurable</span>:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>,<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">enumerable</span>:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>,<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">value</span>:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>,<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">writable</span>:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span> 
    <span class="hljs-reserved" style="box-sizing: border-box;">var</span> ffbtx = Object.getOwnPropertyDescriptor(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">window</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ffb'</span>); <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">configurable</span>:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>,<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">enumerable</span>:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>,<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">value</span>:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>,<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">writable</span>:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span> 
    <span class="hljs-reserved" style="box-sizing: border-box;">var</span> ffctx = Object.getOwnPropertyDescriptor(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">window</span&

web開發常見問題集錦

1.JS控制HTML元素的顯示和隱藏

2.document.documentElement是什麼，和document.body的區別？

3.為什麼浮動元素可以撐開父級容器？

4.JS獲取可視視窗、html文件、body的高度和寬度

5.如何使固定定位的元素（position:fixed）的元素垂直水平居中在瀏覽器可視視窗中央？

6.html中如何鍵入兩個漢字空格？

7.js在函式中申明變數可以不用var嗎？

web開發常見問題集錦

移動端web開發常見問題------彭記(023)

Web開發常見的幾個漏洞解決方法

移動端web開發常見問題

web開發常見問題整理

web開發常見安全問題

Web開發常見的幾個漏洞解決方法 ---SQL注入

Java Web開發常見異常及排查方法記錄

WEB開發常見錯誤-php無法操作數據庫

WEB開發中常見的漏洞

Vue 開發常見問題集錦

VueJS 開發常見問題集錦

服務端web開發：PHP簡介以及常見語法

Web開發常規調試方法與常見問題分析

web開發相關概念與常見web伺服器

Web開發中常見的認證機制

ava web 開發過程中常見的一些錯誤

Web 開發最有用的50款 jQuery 外掛集錦——《圖片特效篇》

Android 開發常見錯誤及解決方法集錦

Android 開發常見錯誤集錦

web開發常見問題集錦

1.JS控制HTML元素的顯示和隱藏

2.document.documentElement是什麼，和document.body的區別？

3.為什麼浮動元素可以撐開父級容器？

4.JS獲取可視視窗、html文件、body的高度和寬度

5.如何使固定定位的元素（position:fixed）的元素垂直水平居中在瀏覽器可視視窗中央？

6.html中如何鍵入兩個漢字空格？

7.js在函式中申明變數可以不用var嗎？

相關推薦