<thead id="vznn5"><meter id="vznn5"></meter></thead>

        <nobr id="vznn5"><meter id="vznn5"><dfn id="vznn5"></dfn></meter></nobr>

        <th id="vznn5"></th>

        <sub id="vznn5"></sub><track id="vznn5"></track>

          <sub id="vznn5"><meter id="vznn5"></meter></sub>

            <th id="vznn5"></th>

            <thead id="vznn5"></thead>

              <nobr id="vznn5"><menuitem id="vznn5"><dfn id="vznn5"></dfn></menuitem></nobr>

                <nobr id="vznn5"></nobr>

                <th id="vznn5"></th>

                <track id="vznn5"><meter id="vznn5"></meter></track>

                <th id="vznn5"><meter id="vznn5"><dfn id="vznn5"></dfn></meter></th>

                    <font id="vznn5"></font>

                    <track id="vznn5"></track>

                    <nobr id="vznn5"></nobr>
                      <thead id="vznn5"><menuitem id="vznn5"><cite id="vznn5"></cite></menuitem></thead>
                      <track id="vznn5"></track>

                          <th id="vznn5"><progress id="vznn5"></progress></th>
                          1. <dl id="vznn5"></dl><dl id="vznn5"><ins id="vznn5"><thead id="vznn5"></thead></ins></dl>
                            <li id="vznn5"></li>

                          2. 首頁 - 網站建設 - 前端不為人知的一面

                            前端不為人知的一面 返回列表

                            德德2018-09-21編輯發布,已經有71個小可愛看過這篇文章啦

                            地址欄運行HTML代碼

                            如data:text/html,

                            hello,world!

                             


                            頁面會正常顯示hello.world! ( ie內核瀏覽器除外).

                            針對這一功能我們可以實現更強大的效果,利用HTML5新屬性contenteditable ,

                            這個屬性表示內容可編輯,如地址欄運行data:text/html,后瀏覽器變成了一個簡單的編輯器,和Windows自帶記事本效果差不多.


                            contenteditable 

                            打開任意網頁在console中執行document.body.contentEditable="true" 可以讓整個網頁內容可編輯,可以任意編輯頁面上的內容.


                            實時編輯CSS

                            將style標簽放在body中,通過設置style標簽的display:block樣式可以讓頁面的style標簽顯示出來,并且加上contentEditable屬性后可以讓樣式成為可編輯狀態,更改后的樣式效果也是實時更新呈現的。此技巧在IE下無效。如:

                            在瀏覽器中打開頁面能夠看到body { color: blue; },并且可以編輯,且更改之后能實時看到效果,如吧blue換成red ,body { color: red; }這段文字也會變成紅色.


                            固定元素長寬比不受分辨率變化的影響

                            元素不設置高度設置的padding和margin的top和bottom設置百分比時百分比是參照元素的寬度而不是高度所以當寬度變化時能夠讓元素長寬比不變,給這種元素添加子元素時需要定位.


                            JS不聲明第三變量的值交換

                            正常情況下js要交換兩個變量的值需要 聲明第三個變量來暫存,而不聲明第三個變量的情況下能不能實現兩個變量的值的交換呢?答案是肯定的.

                            var a=1,b=2;

                            console.log(a,b);這里輸出a和b的值是1和2

                            a=[b,b=a][0];

                            console.log(a,b);而這里a和b的值就發生了交換.


                            • HTML5
                            • Javascript
                            • 前端

                            相關新聞

                            辽宁十一选五开奖结果