jQuery DOM操作--样式操作

jQuery DOM操作–样式操作

CSS

方法	说明
css(name|pro|[,val|fn])	访问匹配元素的样式属性。
jQuery.cssHooks	直接向 jQuery 中添加钩子，用于覆盖设置或获取特定 CSS 属性时的方法，目的是为了标准化 CSS 属性名或创建自定义属性。

说明：

css(name|pro|[,val|fn]):
jQuery 1.8中，当你使用CSS属性在css()或animate()中，我们将根据浏览器自动
加上前缀(在适当的时候)，比如(“user-select”, “none”); 在Chrome/Safari浏览器
中我们将设置为”-webkit-user-select”, Firefox会使用”-moz-user-select”,
IE10将使用”-ms-user-select”.

---

jQuery.cssHooks：
直接向 jQuery 中添加钩子，用于覆盖设置或获取特定 CSS 属性时的方法，
目的是为了标准化 CSS 属性名或创建自定义属性。

$.cssHooks 对象提供了一种通过定义函数来获取或设置特定 CSS 值的方法。可以用它
来创建新的 cssHooks 用于标准化 CSS3 功能，例如，盒子阴影（box shadows）
及渐变（gradients）。

例如，某些基于 Webkit 的浏览器会使用 -webkit-border-radius 来设置对象的
border-radius，然而,早先版本的 Firefox 则使用 -moz-border-radius。

cssHook 就可以将这些不同的写法进行标准化，从而让 .css() 可以使用统一的标准
化属性名(border-radius 或对应的 DOM 属性写法 borderRadius)。

该方法除了提供了对特定样式的处理可以采用更加细致的控制外，$.cssHooks
同时还扩展了 .animate() 方法上的属性集。

定义一个新的 cssHook 十分简单。下面的模板可以方便您创建自己的 cssHook：

(function($) {
    // first, check to see if cssHooks are supported
    if (!$.cssHooks) {
        // if not, output an error message
        throw ("jQuery 1.4.3 or above is required for this plugin to work");
        return;
    }
    $.cssHooks["someCSSProp"] = {
        get : function(elem, computed, extra) {
            // handle getting the CSS property
        },
        set : function(elem, value) {
            // handle setting the CSS value
        }
    };
})(jQuery);

在标准化 CSS 属性之前，首先要判断浏览器是否支持待标准的属性或经过变化（例如，带前缀）的属性。例如，要检查浏览器是否支持 border-radius 属性，还要检查该属性的任何变种写法是否是临时元素的 style 对象中的成员。

(function($) {
    function styleSupport(prop) {
        var vendorProp, supportedProp,
        // capitalize first character of the prop to test vendor prefix
        capProp = prop.charAt(0).toUpperCase() + prop.slice(1), prefixes = [
                "Moz", "Webkit", "O", "ms" ], div = document.createElement("div");
        if (prop in div.style) {
            // browser supports standard CSS property name 
            supportedProp = prop;
        } else {
            // otherwise test support for vendor-prefixed property names
            for (var i = 0; i < prefixes.length; i++) {
                vendorProp = prefixes[i] + capProp;
                if (vendorProp in div.style) {
                    supportedProp = vendorProp;
                    break;
                }
            }
        }
        // avoid memory leak in IE
        div = null;
        // add property to $.support so it can be accessed elsewhere
        $.support[prop] = supportedProp;
        return supportedProp;
    }
    // call the function, e.g. testing for "border-radius" support:
    styleSupport("borderRadius");
})(jQuery);

定义一个完整的 cssHook
为了定义一个完整的 cssHook，首先我们需要测试您当前使用的 jQuery 版本是否支持 cssHooks 方法，此外，还要结合上面提到的例子：

(function($) {
    if (!$.cssHooks) {
        throw ("jQuery 1.4.3+ is needed for this plugin to work");
        return;
    }
    function styleSupport(prop) {
        var vendorProp, supportedProp, capProp = prop.charAt(0).toUpperCase()
                + prop.slice(1), prefixes = [ "Moz", "Webkit", "O", "ms" ], div = document
                .createElement("div");
        if (prop in div.style) {
            supportedProp = prop;
        } else {
            for (var i = 0; i < prefixes.length; i++) {
                vendorProp = prefixes[i] + capProp;
                if (vendorProp in div.style) {
                    supportedProp = vendorProp;
                    break;
                }
            }
        }
        div = null;
        $.support[prop] = supportedProp
        return supportedProp;
    }
    var borderRadius = styleSupport("borderRadius");
    // Set cssHooks only for browsers that
    // support a vendor-prefixed border radius
    if (borderRadius && borderRadius !== "borderRadius") {
        $.cssHooks.borderRadius = {
            get : function(elem, computed, extra) {
                return $.css(elem, borderRadius);
            },
            set : function(elem, value) {
                elem.style[borderRadius] = value;
            }
        };
    }
})(jQuery);

之后，您就可以在支持该属性的浏览器中使用 DOM (camel 式) 样式的写法或使用 CSS (带连字符号) 样式的写法来设置边框的半径了：

$("#element").css("borderRadius", "10px");
$("#another").css("border-radius", "20px");  

如果浏览器不支持任何一种形式的 CSS 属性写法，并且也不支持任何前缀写法，那么该样式是不会应用到元素上的。但是，如果浏览器支持某种特殊的写法，那么可以在 cssHooks 中添加对该特殊用法的支持。

(function($) {
    // feature test for support of a CSS property
    // and a proprietary alternative
    // ...
    if ($.support.someCSSProp && $.support.someCSSProp !== "someCSSProp") {
        // Set cssHooks for browsers that
        // support only a vendor-prefixed someCSSProp
        $.cssHooks.someCSSProp = {
            get : function(elem, computed, extra) {
                return $.css(elem, $.support.someCSSProp);
            },
            set : function(elem, value) {
                elem.style[$.support.someCSSProp] = value;
            }
        };
    } else if (supportsProprietaryAlternative) {
        $.cssHooks.someCSSProp = {
            get : function(elem, computed, extra) {
                // Handle crazy conversion from the proprietary alternative
            },
            set : function(elem, value) {
                // Handle crazy conversion to the proprietary alternative
            }
        }
    }
})(jQuery);

特殊单位
默认情况下，通过 .css() 方法设置的值，jQuery 会为其加上 “px” 单位。您可以通过向 jQuery.cssNumber 对象中添加属性的方法来防止这种行为的发生。

$.cssNumber["someCSSProp"] = true;

动画与 cssHooks
通过向 jQuery.fx.step 对象中添加属性，cssHook 同样可以向 jQuery 的动画机制中添加钩子：

$.fx.step["someCSSProp"] = function(fx){
    $.cssHooks["someCSSProp"].set( fx.elem, fx.now + fx.unit );
};  

位置

方法	说明
offset([coordinates])	获取匹配元素在当前视口的相对偏移。
position()	获取匹配元素相对父元素的偏移。
scrollTop([val])	获取匹配元素相对滚动条顶部的偏移。
scrollLeft([val])	获取匹配元素相对滚动条左侧的偏移。

说明：
offset([coordinates])：返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
参数说明：
coordinates{top,left}（Object）：必需。规定以像素计的 top 和 left 坐标。
可能的值：

• 值对，比如 {top:100,left:0}
• 带有 top 和 left 属性的对象

function(index,coords)（function）：返回被选元素新偏移坐标的函数。

• index - 可选。接受选择器的 index 位置
• oldvalue - 可选。接受选择器的当前坐标

---

position()：返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

var p = $("p:first");
var position = p.position();
$("li").html( "left: " + position.left + ", top: " + position.top );

---

scrollTop([val]):此方法对可见和隐藏元素均有效。
参数val （String，Number）：设置相对滚动条顶部的偏移

---

scrollLeft([val]):此方法对可见和隐藏元素均有效。
参数val （String，Number）：设置相对滚动条左侧的偏移

尺寸

方法	说明
height([val|fn])	取得匹配元素当前计算的高度值（px）。
width([val|fn])	取得第一个匹配元素当前计算的宽度值（px）。
innerHeight()	获取第一个匹配元素内部区域高度（包括补白、不包括边框）。
innerWidth()	获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。
outerHeight([options])	获取第一个匹配元素外部高度（默认包括补白和边框）。
outerWidth([options])	获取第一个匹配元素外部宽度（默认包括补白和边框）。

height([val|fn]):在 jQuery 1.2 以后可以用来获取 window 和 document 的高
参数说明：
无参 ：取得匹配元素当前计算的高度值（px）。
val（String, Number, Function）：设定CSS中 ‘height’ 的值，可以是字符串或者数字， 还可以是一个函数，返回要设置的数值。函数接受两个参数，第一个参数是元素在原先集合中的索引位置，第二个参数为原先的高度。
function(index, height)（String, Number, Function）：返回用于设置高度的一个函数。接收元素的索引位置和元素旧的高度值作为参数。

---

width([val|fn]):在 jQuery 1.2 以后可以用来获取 window 和 document 的宽
参数说明：
无参 ：取得匹配元素当前计算的宽度值（px）。
val（String, Number, Function）：设定CSS中 ‘width’ 的值，可以是字符串或者数字，还可以是一个函数，返回要设置的数值。函数接受两个参数，第一个参数是元素在原先集合中的索引位置，第二个参数为原先的宽度。
function(index, width)（String, Number, Function）：返回用于设置高度的一个函数。接收元素的索引位置和元素旧的宽度值作为参数。

---

innerHeight()、innerWidth()、outerHeight([options])、outerWidth([options]对可见和隐藏元素均有效

---

outerWidth([options])：
参数说明：
options（Boolean）： 默认值:’false’，设置为 true 时，计算边距在内。

---

outerHeight([options])：
参数说明：
options（Boolean）： 默认值:’false’，设置为 true 时，计算边距在内。