1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

css的钩子机制

作者:用户 来源:互联网 时间:2016-08-03 12:56:59

浏览器特殊最简写法属性前缀钩子写法钩子机制特定css浏览器前缀

css的钩子机制 - 摘要: 本文讲的是css的钩子机制, 你知道一些核心 jQuery 函数都有自己的“插件API”称为“钩子”? jQuery 提供一个 API 来调用用户自定义的函数,用于扩展,以便获取和设置

你知道一些核心 jQuery 函数都有自己的“插件API”称为“钩子”?

jQuery 提供一个 API 来调用用户自定义的函数,用于扩展,以便获取和设置特定属性值。在.attr,.prop(),.val()和 .css()的操作中都会引入钩子,钩子都有相似的结构。

var someHook = {
    get: function(elem) {
        // obtain and return a value
        return "something";
    },
    set: function(elem, value) {
        // do something with value
    }
}


钩子用来干什么?

在做 css3 属性浏览器兼容的时候,都需要特定的前缀。

Webkit 内核浏览器:-webkit-border-radius
Firefox 内核浏览器:-moz-border-radius

此时我看可以采用一个CSS hook 可以标准化这些供应商前缀的属性,让 css 接受一个单一的标准的属性的名称(border-radius 或用 DOM 属性的语法 borderRadius)判断的代码省略,直接看实现,给某一元素设置borderRadius 为10px。

$("#element").css("borderRadius", "10px");

为了做浏览器兼容,我们不得不:

if(webkit){
   ........................
}else if(firefox){
  ...........................
}else if(...)更多

这是一种最没技术含量的写法了,如果我们换成一种 hook 的话:

$.cssHooks.borderRadius = {
      get: function( elem, computed, extra ) {
        return $.css( elem, borderRadius );
      },
      set: function( elem, value) {
        elem.style[ borderRadius ] = value;
      }
};

$.cssHooks 对象提供了一种方法通过定义函数来获取和设置特定的CSS值的方法,它也可以被用来创建新的 cssHooks 以标准化 CSS3 功能,如框阴影和渐变。

例如 border-radius 属性,在早起的时候还没有形成标准化浏览器都有各自的实现,比如基于 webkit 的谷歌浏览器就需要写成 webkit-border-radius,Firefox 就需要写成 -moz-border-radius ,所以我们需要一个钩子都判断这个标准实现这个头部的前缀添加。

除了提供了对特定样式的处理可以采用更加细致的控制外,$.cssHooks也扩展了 .animate() 方法上可用的属性。这里可能还不能直观的体现,我们需在之后章节中深入到 css 源码中看到具体的用法。如果浏览器不支持任何形式的 CSS 属性写法,并且也不支持任何前缀写法,那么该样式是不会应用到元素上的。但是,如果浏览器支持某种特殊的写法,那么可以在 cssHooks 中添加对该特殊用法的支持。
 



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索浏览器 , 特殊最简写法 , 属性 , 前缀 , 钩子 , 写法 , 钩子机制 , 特定 css浏览器前缀 钩子机制、javascript 钩子机制、js 钩子机制、路霸钩子机制、jquery 钩子机制,以便于您获取更多的相关知识。

vb.net中的钩子是指的什么东西

问题描述 vb.net中的钩子是指的什么东西 今年刚学的vb.net,我看到要好多人都提到了钩子,请问下什么是钩子呢,他都能干什么呢,请各位专家指点下 解决方案 简...

聊一聊Vue.js过渡效果_javascript技巧

...触发 CSS3 过渡/动画效果,你也可以提供相应的 JavaScript 钩子函数在过渡过程中执行自定义的 DOM 操作。 以 v-transition="my-transition" 这个指令为例,当带有这个指令的 DOM 节点被插入或移除时,Vue 将会: 用 my-transition 这个 ID 去查找...

从头学习Drupal--基本概念一

..., 多语言支持, 邮件处理, 图像优化等. 当然还有最关键的钩子(hook)框架, 钩子是贯穿Drupal核心的一个重要特性, 它使得Drupal能高效灵活地协调模块们的工作. 这里把它叫做核心库确实不妥当, 以为它不仅仅是一个库, 更是一个公共框...

Ruby-Module初探

...类,并且能够方便地从模块中获得静态方法和实例方法。钩子方法 我们在定义一个module时,还可以为其定义钩子方法,钩子方法名以动词的过去分词形式出现,当模块被以不同方式(include, extend)加入其它模块或类时,对应的*e...

从 UglifyJSPlugin 强制开启 css 压缩探究 webpack 插件运行机制

...lugin.prototype.apply = function(compiler) {// 指定挂载的webpack事件钩子。compiler.plugin('webpacksEventHook', function(compilation /* 处理webpack内部实例的特定数据。*/, callback) {console.log("This is an example plugin!!!");// 功能完成后调用webpack提供的回调。call...

前三篇
后三篇