The following four functions are part of it.
first we want to add a browser detection script:
Copy Code code as follows:
/************************************
* Detection Browser
***********************************/
var user = navigator.useragent;
var browser = {};
Browser.opera = User.indexof ("opera") >-1 && typeof Window.opera = = "Object";
browser.khtml = (User.indexof ("khtml") >-1 | | user.indexof ("AppleWebKit") >-1 | | user.indexof ("Konqueror") >-1 ) &&!browser.opera;browser.ie = User.indexof ("MSIE") >-1 &&!browser.opera;
Browser.gecko = User.indexof ("Gecko") >-1 &&!browser.khtml;
if (browser.ie) {
var Ie_reg =/msie (\d+\.\d+);
Ie_reg.test (user);
var v = parsefloat (regexp["$");
Browser.ie55 = v <= 5.5;
Browser.ie6 = v <= 6;
}
i) Add event bind bind ()
This must have been known to all. The event-binding function of IE is attachevent, while Firefox, Safari is Addeventlistener;opera, both are supported. The following is encapsulated.
Copy Code code as follows:
/************************************
* Add Event Bindings
* @param obj: The element to bind the event
* @param type: event name. "On" is not added. such as: "Click" rather than "onclick."
* @param fn: event handler function
************************************/
function bind (obj, type, fn) {
if (obj.attachevent) {
obj[' e ' +type+fn] = fn;
OBJ[TYPE+FN] = function () {obj[' E ' +type+fn] (window.event);}
Obj.attachevent (' On ' +type, OBJ[TYPE+FN]);
} else
Obj.addeventlistener (Type, FN, false);
}
For example, add a page click event:
Bind (document, "click", Function () {
Alert ("Hello, world!!");
});
(ii) Delete event binding unbind ()
The same as the bind () function parameter, and the reverse function.
Copy Code code as follows:
/************************************
* Delete Event Bindings
* @param obj: element to delete an event
* @param type: event name. "On" is not added. such as: "Click" rather than "onclick"
* @param fn: event handler function
************************************/
function unbind (obj, type, fn) {
if (obj.detachevent) {
Obj.detachevent (' On ' +type, OBJ[TYPE+FN]);
OBJ[TYPE+FN] = null;
} else
Obj.removeeventlistener (Type, FN, false);
}
third) Get the calculation style of the element
The calculation style is also called the final style, which is the style that the element eventually renders. IE uses the Currentstyle attribute of the element, while the other browsers are the standard Document.defaultView.getComputedStyle () method.
Copy Code code as follows:
/************************************
* Returns the calculated style of the element
* @param element: Elements
* @param key: Style name (camel)
************************************/
function GetStyle (element, key) {
parameter is not correct
if (typeof element!= "Object" | | typeof key!= "string" | | key = = "")
return false;
Opacity
if (key = = "Opacity") {
if (browser.ie) {
var f = element.filters;
if (f && f.length > 0 && f.alpha) {
return (F.ALPHA.OPACITY/100);
}
return 1.0;
}
return Document.defaultView.getComputedStyle (element, NULL) ["opacity"];
}
Floating
if (key = = "float") {
Key = (browser.ie? "Stylefloat": "Cssfloat");
}
if (typeof Element.currentstyle!= "undefined") {
return Element.currentstyle[key];
} else {
return Document.defaultView.getComputedStyle (element, NULL) [key];
}
}
The transparency mechanism of IE and other browsers is not the same, where the unification uses opacity to express transparency. Also, because float is a reserved word for JavaScript, the browser escapes it, IE uses stylefloat, while others are cssfloat. This unification is float.
For example: getting transparency
Copy Code code as follows:
var a = document.getElementById ("test");
var opacity = GetStyle (A, "opacity");
(iv) DOM loaded event binding domready ()
Domready and Window.onload different, window.onload is all the elements of the page loaded complete, including images, videos and other things. In general, we don't have to wait that long, and we just need the DOM to be available.
Copy Code code as follows:
/************************************
* Domready
* @param fn: function to execute
************************************/
function Domready (FN) {
parameter is not correct
if (typeof fn!= "function")
return false;
if (typeof Document.addeventlistener = = "function") {//Non IE browser
Document.addeventlistener ("domcontentloaded", FN, false);
Return
}
var _this = Arguments.callee;
if (_this.ready)//If the DOM is finished loading, execute directly
return FN ();
if (!_this.list)//Create an array of pending functions
_this.list = [];
_this.list.push (FN);
if (_this.done) return; Loop detection is returned
(function () {//cyclic detection
_this.done = true;
try {
Document.documentElement.doScroll ("left");
catch (Error) {
settimeout (Arguments.callee, 0);
Return
}
DOM loaded, executing all pending functions
_this.ready = true;
For (Var i=0, l=_this.list.length i<l; i++) {
_this.list[i] ();
}
})();
}
For example:
Copy Code code as follows:
Domready (function () {
Alert ("DOM loaded!") ");
});
