js获取非行间样式

/*jquery中兼容处理*/ ???var ????ralpha = /alpha\([^)]*\)/i, ???????ropacity = /opacity\s*=\s*([^)]*)/i, ???????// swappable if display is none or starts with table except ???????// "table", "table-cell", or "table-caption" ???????// see here for display values: ???????// https://developer.mozilla.org/en-US/docs/CSS/display ???????rdisplayswap = /^(none|table(?!-c[ea]).+)/, ???????rnumsplit = new RegExp( "^(" + pnum + ")(.*)$", "i" ), ???????cssShow = { position: "absolute", visibility: "hidden", display: "block" }, ???????cssNormalTransform = { ???????????letterSpacing: "0", ???????????fontWeight: "400" ???????}, ???????cssPrefixes = [ "Webkit", "O", "Moz", "ms" ], ???????emptyStyle = document.createElement( "div" ).style; ???var rnumnonpx = new RegExp( "^(" + pnum + ")(?!px)[a-z%]+$", "i" );var getStyle,curCSS, ???rposition = /^(top|right|bottom|left)$/;if(window.getComputedStyle){ ???// Support: IE<=11+, Firefox<=30+ (#15098, #14150) ???// IE throws on elements created in popups ?IE在弹窗中创建元素时抛出错误 ???// FF meanwhile throws on frame elements through "defaultView.getComputedStyle" ???// 同时FF在框架frame中使用"defaultView.getComputedStyle"会抛出错误 ???getStyle = function(elem){ ???????//Node.ownerDocument 只读属性会返回当前节点的顶层的 document 对象。 ???????//注意：被此属性返回的 document 对象是在实际的HTML文档中的所有子节点所属的主对象。 ???????// 如果在文档节点自身上使用此属性，则结果是null。 ??????//var win = document.defaultView; ???????// 在浏览器中，该属性返回当前 document 对象所关联的 window 对象，如果没有（ie8？），会返回 null。 ?????// jquery(#15098, #14150) ?它曾经使用window.getComputedStyle，无论哪个文档拥有该节点，并且现在使用（看似更正确的） ??????// ownerDocument.defaultView访问相关窗口（例如，在iframe或弹出窗口中）并在其中调用getComputedStyle。 ???????var view = elem.ownerDocument.defaultView; ??????// opener 属性是一个可读可写的属性，可返回对创建该窗口的 Window 对象的引用。 ???????//opener 属性非常有用，创建的窗口可以引用创建它的窗口所定义的属性和函数。 ???????//注释：只有表示顶层窗口的 Window 对象的 operner 属性才有效，表示框架的 Window 对象的 operner 属性无效。 ???????// ?opener代表打开自身的那个窗口，比如窗口a.html打开窗口b.html。 ???????// ??如果靠window.open方法，则对于窗口b.html，self代表b.html自己，而opener代表窗口a.html。 ???????// ??myWindow=window.open(‘‘,‘MyName‘,‘width=200,height=100‘) ???????// ??myWindow.document.write("This is ‘myWindow‘") ???????// ??myWindow.focus() ???????// ??myWindow.opener.document.write("This is the parent window") ???????if(!view||!view.opener){//如果是框架则使用window ???????????view = window; ???????} ???} ???curCSS = function( elem, name, computed ) { ???????var width, minWidth, maxWidth, ret, ???????????style = elem.style; ???????computed = computed || getStyles( elem ); ???????// getPropertyValue is only needed for .css(‘filter‘) in IE9, see #12537 ???????//getPropertyValue仅在IE9中.css（‘filter‘）需要，请参见＃12537;element.css(‘filter‘) returns undefined in IE9 ???????ret = computed ? computed.getPropertyValue( name ) || computed[ name ] : undefined; ???????// Support: Opera 12.1x only ???????// Fall back to style even without computed ???????// computed is undefined for elems on document fragments ?对文档片段上的elems计算undefined ???????if ( ( ret === "" || ret === undefined ) && !jQuery.contains( elem.ownerDocument, elem ) ) { ???????????ret = jQuery.style( elem, name ); ???????} ???????if ( computed ) { ???????????// A tribute to the "awesome hack by Dean Edwards" ???????????// Chrome < 17 and Safari 5.0 uses "computed value" ???????????// instead of "used value" for margin-right ???????????// Safari 5.1.7 (at least) returns percentage for a larger set of values, ???????????// but width seems to be reliably pixels ???????????// this is against the CSSOM draft spec: ???????????// http://dev.w3.org/csswg/cssom/#resolved-values ???????????// Chrome < 17 and Safari 5.0 的margin-right使用“计算值”而不是“应用值” ???????????//Safari 5.1.7 (at least)返回一组百分比，但宽度似乎是可靠的像素,这是有背CSSOM草案规范 ???????????if ( !support.pixelMarginRight() && rnumnonpx.test( ret ) && rmargin.test( name ) ) { ???????????????// Remember the original values ???????????????width = style.width; ???????????????minWidth = style.minWidth; ???????????????maxWidth = style.maxWidth; ???????????????// Put in the new values to get a computed value out ???????????????style.minWidth = style.maxWidth = style.width = ret; ???????????????ret = computed.width; ???????????????// Revert the changed values ???????????????style.width = width; ???????????????style.minWidth = minWidth; ???????????????style.maxWidth = maxWidth; ???????????} ???????} ???????// Support: IE ???????// IE returns zIndex value as an integer. ???????return ret === undefined ? ???????????ret : ???????????ret + ""; ???};}else if(documentElement.currentStyle){ ???getStyle = function(elem){ ???????return elem.currentStyle; ???} ???curCSS = function( elem, name, computed ) { ???????var left, rs, rsLeft, ret, ???????????style = elem.style; ???????computed = computed || getStyles( elem ); ???????ret = computed ? computed[ name ] : undefined; ???????// Avoid setting ret to empty string here ???????// so we don‘t default to auto ???????// 避免将ret设置为空字符串，因此我们不会默认为auto ???????if ( ret == null && style && style[ name ] ) { ???????????ret = style[ name ]; ???????} ???????// From the awesome hack by Dean Edwards ???????// http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291 ???????// If we‘re not dealing with a regular pixel number ???????// but a number that has a weird ending, we need to convert it to pixels ???????// but not position css attributes, as those are ???????// proportional to the parent element instead ???????// and we can‘t measure the parent instead because it ???????// might trigger a "stacking dolls" problem ???????//如果我们不处理正常的像素数 ???????// 但一个数字有一个奇怪的结尾，我们需要将其转换为像素 ???????//但不是位置css属性，因为它们与父元素成比例，我们不能测量父级元素， ???????// 因为它可能会触发“堆叠”问题 ???????if ( rnumnonpx.test( ret ) && !rposition.test( name ) ) { ???????????// Remember the original values ???????????left = style.left; ???????????rs = elem.runtimeStyle; ???????????rsLeft = rs && rs.left; ???????????// Put in the new values to get a computed value out ???????????if ( rsLeft ) { ???????????????rs.left = elem.currentStyle.left; ???????????} ???????????style.left = name === "fontSize" ? "1em" : ret; ???????????ret = style.pixelLeft + "px"; ???????????// Revert the changed values ???????????style.left = left; ???????????if ( rsLeft ) { ???????????????rs.left = rsLeft; ???????????} ???????} ???????// Support: IE ???????// IE returns zIndex value as an integer. ???????return ret === undefined ? ???????????ret : ???????????ret + "" || "auto"; ???}; ???jQuery.extend( { ???????// Add in style property hooks for overriding the default ???????// behavior of getting and setting a style property ???????//添加样式属性钩子，以覆盖获取和设置样式属性的默认行为 ???????cssHooks: { ???????????opacity: { ???????????????get: function( elem, computed ) { ???????????????????if ( computed ) { ???????????????????????// We should always get a number back from opacity ???????????????????????var ret = curCSS( elem, "opacity" ); ???????????????????????return ret === "" ? "1" : ret; ???????????????????} ???????????????} ???????????} ???????}, ???????// Don‘t automatically add "px" to these possibly-unitless properties ???????//不要自动添加“px”到这些可能无单位的属性 ???????cssNumber: { ???????????"animationIterationCount": true, ???????????"columnCount": true, ???????????"fillOpacity": true, ???????????"flexGrow": true, ???????????"flexShrink": true, ???????????"fontWeight": true, ???????????"lineHeight": true, ???????????"opacity": true, ???????????"order": true, ???????????"orphans": true, ???????????"widows": true, ???????????"zIndex": true, ???????????"zoom": true ???????}, ???????// Add in properties whose names you wish to fix before ???????// setting or getting the value ???????//在设置或获取值之前添加要修复其名称的属性 ???????cssProps: { ???????????// normalize float css property ???????????// (IE uses styleFloat instead of cssFloat) ???support.cssFloat = !!div.style.cssFloat; ???????????"float": support.cssFloat ? "cssFloat" : "styleFloat" ???????}, ???????// Get and set the style property on a DOM Node 获取和设置DOM节点上的style属性 ???????style: function( elem, name, value, extra ) { ???????????// Don‘t set styles on text and comment nodes 不要在文本和注释节点上设置样式 ???????????if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 || !elem.style ) { ???????????????return; ???????????} ???????????// Make sure that we‘re working with the right name 确保我们正在使用正确的名称 ???????????var ret, type, hooks, ???????????????origName = jQuery.camelCase( name ), ???????????????style = elem.style; ???????????name = jQuery.cssProps[ origName ] || ???????????????( jQuery.cssProps[ origName ] = vendorPropName( origName ) || origName ); ???????????// gets hook for the prefixed version ???????????// followed by the unprefixed version ???????????hooks = jQuery.cssHooks[ name ] || jQuery.cssHooks[ origName ]; ???????????// Check if we‘re setting a value ???????????if ( value !== undefined ) { ???????????????type = typeof value; ???????????????// Convert "+=" or "-=" to relative numbers (#7345) ???????????????if ( type === "string" && ( ret = rcssNum.exec( value ) ) && ret[ 1 ] ) { ???????????????????value = adjustCSS( elem, name, ret ); ???????????????????// Fixes bug #9237 ???????????????????type = "number"; ???????????????} ???????????????// Make sure that null and NaN values aren‘t set. See: #7116 ???????????????if ( value == null || value !== value ) { ???????????????????return; ???????????????} ???????????????// If a number was passed in, add the unit (except for certain CSS properties) ???????????????if ( type === "number" ) { ???????????????????value += ret && ret[ 3 ] || ( jQuery.cssNumber[ origName ] ? "" : "px" ); ???????????????} ???????????????// Fixes #8908, it can be done more correctly by specifing setters in cssHooks, ???????????????// but it would mean to define eight ???????????????// (for every problematic property) identical functions ???????????????if ( !support.clearCloneStyle && value === "" && name.indexOf( "background" ) === 0 ) { ???????????????????style[ name ] = "inherit"; ???????????????} ???????????????// If a hook was provided, use that value, otherwise just set the specified value ???????????????//如果提供了一个钩子，请使用该值，否则只需设置指定的值 ???????????????if ( !hooks || !( "set" in hooks ) || ???????????????????( value = hooks.set( elem, value, extra ) ) !== undefined ) { ???????????????????// Support: IE ???????????????????// Swallow errors from ‘invalid‘ CSS values (#5509) ???????????????????try { ???????????????????????style[ name ] = value; ???????????????????} catch ( e ) {} ???????????????} ???????????} else { ???????????????// If a hook was provided get the non-computed value from there ???????????????if ( hooks && "get" in hooks && ???????????????????( ret = hooks.get( elem, false, extra ) ) !== undefined ) { ???????????????????return ret; ???????????????} ???????????????// Otherwise just get the value from the style object ???????????????return style[ name ]; ???????????} ???????}, ???????css: function( elem, name, extra, styles ) { ???????????var num, val, hooks, ???????????????origName = jQuery.camelCase( name ); ???????????// Make sure that we‘re working with the right name ???????????name = jQuery.cssProps[ origName ] || ???????????????( jQuery.cssProps[ origName ] = vendorPropName( origName ) || origName ); ???????????// gets hook for the prefixed version ???????????// followed by the unprefixed version ???????????hooks = jQuery.cssHooks[ name ] || jQuery.cssHooks[ origName ]; ???????????// If a hook was provided get the computed value from there ???????????if ( hooks && "get" in hooks ) { ???????????????val = hooks.get( elem, true, extra ); ???????????} ???????????// Otherwise, if a way to get the computed value exists, use that ??????????//如果存在获取计算值的方法，请使用该方法 ???????????if ( val === undefined ) { ???????????????val = curCSS( elem, name, styles ); ???????????} ???????????//convert "normal" to computed value ??"normal"转换为计算值 ???????????if ( val === "normal" && name in cssNormalTransform ) { ???????????????val = cssNormalTransform[ name ]; ???????????} ???????????// Return, converting to number if forced or a qualifier was provided and val looks numeric ???????????//返如果被强制或提供限定符和val看起来数字 返回时转换为数字， ???????????if ( extra === "" || extra ) { ???????????????num = parseFloat( val ); ???????????????return extra === true || isFinite( num ) ? num || 0 : val; ???????????} ???????????return val; ???????} ???} );}