章节
问答
课签
笔记
评论
占位
占位

样式操作接口

jQuery操作样式的接口 jQuery.fn.css 与 jQuery.css

我们知道实例是调用静态的方法,css的接口参数传递是可以很多个组合情况的,这也符合了 jQuery “少写多做”的原则了。

css: function(name, value ) {
        return value !== undefined ?
            jQuery.style(elem, name, value) :
            jQuery.css(elem, name);
 }

最终方法与设置样式的方法是实例方法,所以我们看传递的参数就知道了,只能是单一的 elem、 name、 value 实参。

jQuery.style( elem, name, value ) :
jQuery.css( elem, name );

所以如果我们传递是对象或者别的方式就需要一个过滤的环节,css 参数的处理也跟之前的 attr 属性的处理保持一致,采用了jQuery.access 方法统一调配,这个具体之前就分析了,无非就是递归参数,但是有个可学的设计思路,分离不同的逻辑判断通过回调传递进去。

jQuery.css()取值

用户传递写 css 属性名是可以很随意的,backgroundColor,backgourd-color,所以框架内部自然要过这个统一的处理。

检测是否是驼峰写法,如果不是就得转化下:

origName = jQuery.camelCase( name );

其次还有一些特殊的属性名的读取问题,比如float就是关键字,就需要转成cssFloat,还有浏览器前缀的命名处理。

name = jQuery.cssProps[origName] || (jQuery.cssProps[origName] = vendorPropName(elem.style, origName));

我们知道元素在 display:none 的情况下是无法获取一些跟布局定位有关的值的,还有不同的元素尺寸width、height、margin获取问题等等,但是这么多情况如何去处理?

jQuery在这里就引入了“css钩子”

hooks = jQuery.cssHooks[name] || jQuery.cssHooks[origName];

每一个特定方法都带有各自的处理模式,举个例子如果要获取 ele.css("width")。

那么 cssHooks.width 中就是这样一个结构:

cssHooks = {
    width:{
        get:function(){},
        set:function(){}
    }
}

我们看到 cssHooks 几乎都是针对盒子模型的属性处理了,我们考虑下如果用户获取一个元素的 width 会有什么情况?

1. 元素在隐藏 display:none 先获取不到尺寸
2. 元素的宽度,jQuery就有width、innerWidth、outerWidth等各种不同取值方式
3. 元素可以被设置css3的盒子模型

所以针对这一种特定的属性我们需要单独拿一个钩子做处理,那么在取值的时候,我们自然在 cssHooks.width.get 中要判断一下:当元素是否是可见状态,如果不是则要先处理下,在之后判断盒子模型的处理。接下来我们看到如果没有对应的钩子方法,我们模型采用了 curCSS 取值:

if (hooks && "get" in hooks) {
    val = hooks.get(elem, true, extra);
}
if (val === undefined) {
    val = curCSS(elem, name, styles);
}

其内部就采用了 defaultView.getComputedStyle(elem, null);最终就是通过 getComputedStyle的getPropertyValue 方法了。

所以总结 jquery.css 的接口其实也很简单。

1.转化样式命名
2.处理特殊的属性比如float
3.分离出一个钩子,用于处理跟尺寸有关的属性
4.其余元素采用getComputedStyle获取对应的值

 

任务

?不会了怎么办
||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最热 最新
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?