📄 dom.js
字号:
if (style_pos == 'static') { // default to relative
this.setStyle(el, 'position', 'relative');
style_pos = 'relative';
}
var pageXY = this.getXY(el);
if (pageXY === false) { // has to be part of doc to have pageXY
return false;
}
var delta = [ // assuming pixels; if not we will have to retry
parseInt( this.getStyle(el, 'left'), 10 ),
parseInt( this.getStyle(el, 'top'), 10 )
];
if ( isNaN(delta[0]) ) {// in case of 'auto'
delta[0] = (style_pos == 'relative') ? 0 : el.offsetLeft;
}
if ( isNaN(delta[1]) ) { // in case of 'auto'
delta[1] = (style_pos == 'relative') ? 0 : el.offsetTop;
}
if (pos[0] !== null) { el.style.left = pos[0] - pageXY[0] + delta[0] + 'px'; }
if (pos[1] !== null) { el.style.top = pos[1] - pageXY[1] + delta[1] + 'px'; }
var newXY = this.getXY(el);
// if retry is true, try one more time if we miss
if (!noRetry && (newXY[0] != pos[0] || newXY[1] != pos[1]) ) {
this.setXY(el, pos, true);
}
};
Y.Dom.batch(el, f, Y.Dom, true);
},
/**
* Set the X position of an html element in page coordinates, regardless of how the element is positioned.
* The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
* @method setX
* @param {String | HTMLElement | Array} el Accepts a string to use as an ID, an actual DOM reference, or an Array of IDs and/or HTMLElements.
* @param {Int} x The value to use as the X coordinate for the element(s).
*/
setX: function(el, x) {
Y.Dom.setXY(el, [x, null]);
},
/**
* Set the Y position of an html element in page coordinates, regardless of how the element is positioned.
* The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
* @method setY
* @param {String | HTMLElement | Array} el Accepts a string to use as an ID, an actual DOM reference, or an Array of IDs and/or HTMLElements.
* @param {Int} x To use as the Y coordinate for the element(s).
*/
setY: function(el, y) {
Y.Dom.setXY(el, [null, y]);
},
/**
* Returns the region position of the given element.
* The element must be part of the DOM tree to have a region (display:none or elements not appended return false).
* @method getRegion
* @param {String | HTMLElement | Array} el Accepts a string to use as an ID, an actual DOM reference, or an Array of IDs and/or HTMLElements.
* @return {Region | Array} A Region or array of Region instances containing "top, left, bottom, right" member data.
*/
getRegion: function(el) {
var f = function(el) {
var region = new Y.Region.getRegion(el);
return region;
};
return Y.Dom.batch(el, f, Y.Dom, true);
},
/**
* Returns the width of the client (viewport).
* @method getClientWidth
* @deprecated Now using getViewportWidth. This interface left intact for back compat.
* @return {Int} The width of the viewable area of the page.
*/
getClientWidth: function() {
return Y.Dom.getViewportWidth();
},
/**
* Returns the height of the client (viewport).
* @method getClientHeight
* @deprecated Now using getViewportHeight. This interface left intact for back compat.
* @return {Int} The height of the viewable area of the page.
*/
getClientHeight: function() {
return Y.Dom.getViewportHeight();
},
/**
* Returns a array of HTMLElements with the given class.
* For optimized performance, include a tag and/or root node when possible.
* @method getElementsByClassName
* @param {String} className The class name to match against
* @param {String} tag (optional) The tag name of the elements being collected
* @param {String | HTMLElement} root (optional) The HTMLElement or an ID to use as the starting point
* @return {Array} An array of elements that have the given class name
*/
getElementsByClassName: function(className, tag, root) {
var method = function(el) { return Y.Dom.hasClass(el, className); };
return Y.Dom.getElementsBy(method, tag, root);
},
/**
* Determines whether an HTMLElement has the given className.
* @method hasClass
* @param {String | HTMLElement | Array} el The element or collection to test
* @param {String} className the class name to search for
* @return {Boolean | Array} A boolean value or array of boolean values
*/
hasClass: function(el, className) {
var re = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)');
var f = function(el) {
return re.test(el['className']);
};
return Y.Dom.batch(el, f, Y.Dom, true);
},
/**
* Adds a class name to a given element or collection of elements.
* @method addClass
* @param {String | HTMLElement | Array} el The element or collection to add the class to
* @param {String} className the class name to add to the class attribute
*/
addClass: function(el, className) {
var f = function(el) {
if (this.hasClass(el, className)) { return; } // already present
el['className'] = [el['className'], className].join(' ');
};
Y.Dom.batch(el, f, Y.Dom, true);
},
/**
* Removes a class name from a given element or collection of elements.
* @method removeClass
* @param {String | HTMLElement | Array} el The element or collection to remove the class from
* @param {String} className the class name to remove from the class attribute
*/
removeClass: function(el, className) {
var re = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)', 'g');
var f = function(el) {
if (!this.hasClass(el, className)) { return; } // not present
var c = el['className'];
el['className'] = c.replace(re, ' ');
if ( this.hasClass(el, className) ) { // in case of multiple adjacent
this.removeClass(el, className);
}
};
Y.Dom.batch(el, f, Y.Dom, true);
},
/**
* Replace a class with another class for a given element or collection of elements.
* If no oldClassName is present, the newClassName is simply added.
* @method replaceClass
* @param {String | HTMLElement | Array} el The element or collection to remove the class from
* @param {String} oldClassName the class name to be replaced
* @param {String} newClassName the class name that will be replacing the old class name
*/
replaceClass: function(el, oldClassName, newClassName) {
if (oldClassName === newClassName) { // avoid infinite loop
return false;
}
var re = new RegExp('(?:^|\\s+)' + oldClassName + '(?:\\s+|$)', 'g');
var f = function(el) {
if ( !this.hasClass(el, oldClassName) ) {
this.addClass(el, newClassName); // just add it if nothing to replace
return; // note return
}
el['className'] = el['className'].replace(re, ' ' + newClassName + ' ');
if ( this.hasClass(el, oldClassName) ) { // in case of multiple adjacent
this.replaceClass(el, oldClassName, newClassName);
}
};
Y.Dom.batch(el, f, Y.Dom, true);
},
/**
* Generates a unique ID
* @method generateId
* @param {String | HTMLElement | Array} el (optional) An optional element array of elements to add an ID to (no ID is added if one is already present).
* @param {String} prefix (optional) an optional prefix to use (defaults to "yui-gen").
* @return {String | Array} The generated ID, or array of generated IDs (or original ID if already present on an element)
*/
generateId: function(el, prefix) {
prefix = prefix || 'yui-gen';
el = el || {};
var f = function(el) {
if (el) {
el = Y.Dom.get(el);
} else {
el = {}; // just generating ID in this case
}
if (!el.id) {
el.id = prefix + id_counter++;
} // dont override existing
return el.id;
};
return Y.Dom.batch(el, f, Y.Dom, true);
},
/**
* Determines whether an HTMLElement is an ancestor of another HTML element in the DOM hierarchy.
* @method isAncestor
* @param {String | HTMLElement} haystack The possible ancestor
* @param {String | HTMLElement} needle The possible descendent
* @return {Boolean} Whether or not the haystack is an ancestor of needle
*/
isAncestor: function(haystack, needle) {
haystack = Y.Dom.get(haystack);
if (!haystack || !needle) { return false; }
var f = function(needle) {
if (haystack.contains && !isSafari) { // safari "contains" is broken
return haystack.contains(needle);
}
else if ( haystack.compareDocumentPosition ) {
return !!(haystack.compareDocumentPosition(needle) & 16);
}
else { // loop up and test each parent
var parent = needle.parentNode;
while (parent) {
if (parent == haystack) {
return true;
}
else if (!parent.tagName || parent.tagName.toUpperCase() == 'HTML') {
return false;
}
parent = parent.parentNode;
}
return false;
}
};
return Y.Dom.batch(needle, f, Y.Dom, true);
},
/**
* Determines whether an HTMLElement is present in the current document.
* @method inDocument
* @param {String | HTMLElement} el The element to search for
* @return {Boolean} Whether or not the element is present in the current document
*/
inDocument: function(el) {
var f = function(el) {
return this.isAncestor(document.documentElement, el);
};
return Y.Dom.batch(el, f, Y.Dom, true);
},
/**
* Returns a array of HTMLElements that pass the test applied by supplied boolean method.
* For optimized performance, include a tag and/or root node when possible.
* @method getElementsBy
* @param {Function} method - A boolean method for testing elements which receives the element as its only argument.
* @param {String} tag (optional) The tag name of the elements being collected
* @param {String | HTMLElement} root (optional) The HTMLElement or an ID to use as the starting point
*/
getElementsBy: function(method, tag, root) {
tag = tag || '*';
root = Y.Dom.get(root) || document;
var nodes = [];
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -