Javascript&CSS Tips - (4)

Swell Anchor's Hit-Area:

這個話題是源於我在某一次小試驗中，我想在網頁中加入一些鏈接，而因為這個網頁是爲了移動設備而設計，所以我希望它的有效點擊區域會大些，下面這個鏈接里的文章介紹了如何做到這一點，本質上來講，就是增加padding屬性。因為在css的box model里，padding的範圍是在邊界（border）以內的。

http://v3.thewatchmakerproject.com/journal/154/

Opacity(透明度):

如何在指定一個元素的顏色時，讓其帶有透明度，由於不同瀏覽器實現的方法不一樣，目前沒有統一的做法：

http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

Color helper(一些在線的幫助獲得顏色的整數值和CSS名的鏈接):

http://www.colors.commutercreative.com/

http://www.w3schools.com/cssref/css_colornames.asp

Get file size with Javascript

09年研究這個話題時，當時還不可能通過Javascript來做這個操作，因為安全策略的限制。所以當時的解決辦法都是通過Flash。但是看來如今情況不同了，W3C出了新的標準來解決這個常見的需求，可問題是，它在舊版的IE中仍然有支持的問題，這裡有個總結：

http://caniuse.com/fileapi

http://stackoverflow.com/questions/2184513/php-change-the-maximum-upload-file-size

http://stackoverflow.com/questions/1606842/how-can-i-get-a-files-upload-size-using-simple-javascript

http://stackoverflow.com/questions/3717793/javascript-file-upload-size-validation

In IE8 Case: Alternative to getElementsByClassName()

再一次工作的任務中，我才發現到原來IE8不支持getElementsByClassName()方法。在Google上面搜索到很多討論，多數人都一致推薦另一個方法來替代它，就是querySelectorAll()，這個方法被IE8直接支持。關於這個函數：

http://caniuse.com/queryselector

然而我嘗試使用了querySelectorAll()之後，IE8的調試器仍然報錯，於是我只好繼續尋找其中原因，後來我發現了：這段Javascript代碼其實是放在一個很短的網頁里，它只有一個上傳圖片的控件而已，而主頁面是通過iframe加載進這個頁面，但是由於頁面內容很短小，我的同事沒有給它寫完整的HTML文檔結構，沒有DOCTYPE聲明，甚至連HEAD標籤都沒有寫。下面這個文章給出了原因：

http://stackoverflow.com/a/13261525

而事實上，如果忽略DOCTYPE聲明，在IE8的情況下，它會開啟Squirks模式來渲染頁面（正常的話應該是正常模式），在這個模式下，很多正常的Javascript的函數API并沒有被支持，所以需要補上DOCTYPE聲明，至於不同的聲明的含義，則可以參考下面鏈接：

http://www.htmlhelp.com/tools/validator/doctype.html

http://www.w3.org/TR/html4/sgml/loosedtd.html

Alternative to Array.indexOf() in IE8

最近一再遇見這個問題，需要使用indexOf來獲取數組內某一個元素的索引值，然而IE8並不支持這個方法，雖然Mozilla官方有一段爲IE舊版本增加這個方法的代碼段

if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function (searchElement /*, fromIndex */ ) {
        "use strict";
        if (this == null) {
            throw new TypeError();
        }
        var t = Object(this);
        var len = t.length >>> 0;
        if (len === 0) {
            return -1;
        }
        var n = 0;
        if (arguments.length > 1) {
            n = Number(arguments[1]);
            if (n != n) { // shortcut for verifying if it's NaN
                n = 0;
            } else if (n != 0 && n != Infinity && n != -Infinity) {
                n = (n > 0 || -1) * Math.floor(Math.abs(n));
            }
        }
        if (n >= len) {
            return -1;
        }
        var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
        for (; k < len; k++) {
            if (k in t && t[k] === searchElement) {
                return k;
            }
        }
        return -1;
    }
}

不過最後發現原來jQuery有類似功能的方法提供了:$.inArray()

關於這個問題，可以參見：http://stackoverflow.com/questions/3629183/why-doesnt-indexof-work-on-an-array-ie8