jQuery 源码解析(二十六) 样式操作模块 样式详解
样式操作模块可用于管理DOM元素的样式、坐标和尺寸,本节讲解一下样式相关,样式操作通过jQuery实例的css方法来实现,该方法有很多的执行方法,如下:
- css(obj) ;参数1是一个对象时,表示一次性设置多个css样式
- css(name,func) ;参数2是函数时,设置的是函数返回值
- css(name,'') ;参数2是空字符串时,表示删除该样式(删除style属性上的)
- css(name) ;如果忽略第二个参数,则获取第一个匹配元素的name样式
- css(name,value) ;设置每个匹配的元素的name样式为值value。
writer by:大沙漠 QQ:22969969
举个栗子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
<style>
div{width: 200px;height: 200px;background: #0ff;}
</style>
</head>
<body>
<div> </div>
<button id="b1">设置背景和边框</button>
<button id="b2">移除边框</button>
<button id="b3">获取宽度</button>
<script>
$('#b1').click(()=>{
$('div').css({background:'#ff0',border:'1px solid #f00'})
})
$('#b2').click(()=>{
$('div').css('border','')
})
$('#b3').click(()=>{
$('div').text($('div').css('height') ) })
</script>
</body>
</html>
效果如下:
我们设置了三个按钮,分别通过css方法进行设置、删除和获取样式,比较好用哈
源码分析
jquery实例css方法实现如下:
jQuery.fn.css = function( name, value ) { //获取匹配元素集合中第一个元素的计算样式 或者 在每个匹配元素上设置一个或多个内联样式。
// Setting 'undefined' is a no-op
if ( arguments.length === 2 && value === undefined ) {
return this;
} return jQuery.access( this, name, value, true, function( elem, name, value ) { //调用jQuery.access()遍历匹配元素集合,并在每个元素上执行传入的回调函数
return value !== undefined ?
jQuery.style( elem, name, value ) : //如果传入了参数则调用jQuery.style()设置内联样式
jQuery.css( elem, name ); //否则调用jQuery.css()来读取计算样式
});
};
通过access工具函数来实现的,这样参数就支持多种形式了,access在html篇里讲解过了,可以看这个地址:https://www.cnblogs.com/greatdesert/p/11670682.html
可以源码看到,jQuery内部对于css的实现是通过静态的style和css方法来实现的,前者负责设置DOM元素的内联样式,后者用于读取elem元素上name的值,style的实现如下:
jQuery.extend({
style: function( elem, name, value, extra ) { //读取或设置DOM元素的内联样式。elem:DOM元素、name:待读取或设置的样式名、value:待设置的样式值、extra:用于指示获取宽度、高度的计算公式字符串。
// Don't set styles on text and comment nodes
if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 || !elem.style ) { //如果是文本节点或注释节点 或者不是文本、注释节点但是没有style属性
return; //直接返回,不做处理
} // Make sure that we're working with the right name
var ret, type, origName = jQuery.camelCase( name ),
style = elem.style, hooks = jQuery.cssHooks[ origName ]; //将style设置为elem.style name = jQuery.cssProps[ origName ] || origName; // Check if we're setting a value
if ( value !== undefined ) { //如果传入了value值,则设置相对值。
type = typeof value; // convert relative number strings (+= or -=) to relative numbers. #7345
if ( type === "string" && (ret = rrelNum.exec( value )) ) { //如果value是相对值字符串,则计算相对值。value格式是+=..或-=...。rrelNum = /^([\-+])=([\-+.\de]+)/,
value = ( +( ret[1] + 1) * +ret[2] ) + parseFloat( jQuery.css( elem, name ) );
// Fixes bug #9237
type = "number";
} // Make sure that NaN and null values aren't set. See: #7116
if ( value == null || type === "number" && isNaN( value ) ) { //过滤null、NaN类型,不做任何处理,如果要删除某个内联样式,请传入空字符串
return;
} // If a number was passed in, add 'px' to the (except for certain CSS properties)
if ( type === "number" && !jQuery.cssNumber[ origName ] ) { //如果待设置的样式值是一个数值,且该样式不在cssNumber中定义的,则自动追加单位px。cssNumber定义在6492行,是一个数组。
value += "px";
} // If a hook was provided, use that value, otherwise just set the specified value
if ( !hooks || !("set" in hooks) || (value = hooks.set( elem, value )) !== undefined ) { //优先调用修正对象爱那个的修正方法set();
// Wrapped to prevent IE from throwing errors when 'invalid' values are provided
// Fixes bug #5509
try {
style[ name ] = value; //其次设置style[name]属性。
} catch(e) {}
} } else { //如果未传入value参数,则读取内联样式。
// If a hook was provided get the non-computed value from there
if ( hooks && "get" in hooks && (ret = hooks.get( elem, false, extra )) !== undefined ) { //优先调用修正对象的get()修正方法,并返回。
return ret;
} // Otherwise just get the value from the style object
return style[ name ]; //没有修正方法则读取属性style[name]。
}
},
})
从源码里看到我们可以每次递增一些属性,例如:$("div").css('width','+=20')这样去累加宽度的,默认单位为px。
对于css的实现如下:
jQuery.extend({
css: function( elem, name, extra ) { //负责读取DOM元素的计算样式。elem:待读取的DOM元素,name:待设置的样式名,extra:一个字符串,用于指示获取高度、宽度的计算公式。
var ret, hooks; // Make sure that we're working with the right name
name = jQuery.camelCase( name ); //将样式名转换为驼峰式
hooks = jQuery.cssHooks[ name ]; //hooks指向驼峰式样式名对应的修正对象。
name = jQuery.cssProps[ name ] || name; //修正驼峰式样式名,如果origName是float则把name修正为cssFloat或styleFloat // cssFloat needs a special treatment
if ( name === "cssFloat" ) { //如果样式名为cssFloat
name = "float"; //则修正为float
} // If a hook was provided get the computed value from there
if ( hooks && "get" in hooks && (ret = hooks.get( elem, true, extra )) !== undefined ) { //优先调用修正对象的get()修正方法。
return ret; // Otherwise, if a way to get the computed value exists, use that
} else if ( curCSS ) {
return curCSS( elem, name ); //其他调用curCSS(elem,name)读取计算样式。定义在6765行
}
},
})
curCSS是jQuery内部定义的一个工具函数,用于获取某个样式,实现如下:
curCSS = getComputedStyle || currentStyle;
默认等于getComputedStyle(window.getComputedStyle存在的情况下,IE及其它浏览器),currentStyle是jQuery内部实现的一个另一个兼容方案,就不讨论了,getComputedStyle实现如下:
if ( document.defaultView && document.defaultView.getComputedStyle ) { //在IE9+和其他浏览器中。如果window.getComputedStyle属性存在。document.defaultView即window对象。
getComputedStyle = function( elem, name ) { ////定义getComputedStyle()函数
var ret, defaultView, computedStyle; name = name.replace( rupper, "-$1" ).toLowerCase(); //将可能的驼峰式央视名转换为连字符式。rupper = /([A-Z]|^ms)/g, if ( (defaultView = elem.ownerDocument.defaultView) &&
(computedStyle = defaultView.getComputedStyle( elem, null )) ) { //defaultView即window对象 调用window.getComputedStyle()方法获取该节点的样式集合
ret = computedStyle.getPropertyValue( name ); //调用getPropertyValue()方法获取name样式的值。
if ( ret === "" && !jQuery.contains( elem.ownerDocument.documentElement, elem ) ) { //如果没取到计算样式,并且当前元素不再文档中
ret = jQuery.style( elem, name ); //调用jQuery.style()读取内联样式。
}
} return ret;
};
}
通过代码可以看到jQuery优先调用window.getComputedStyle()属性获取样式的。
jQuery 源码解析(二十六) 样式操作模块 样式详解的更多相关文章
- jQuery 源码解析(二十五) DOM操作模块 html和text方法的区别
html和text都可以获取和修改DOM节点里的内容,方法如下: html(value) ;获取匹配元素集合中的一个元素的innerHTML内容,或者设置每个元素的innerHTML内容, ...
- jQuery 源码解析(二十四) DOM操作模块 包裹元素 详解
本节说一下DOM操作模块里的包裹元素子模块,该模块可将当前匹配的元素替换指定的DOM元素,有如下方法: wrap(html) ;在每个匹配元素的外层添加一层DOM元素 ...
- Vue.js 源码分析(二十六) 高级应用 作用域插槽 详解
普通的插槽里面的数据是在父组件里定义的,而作用域插槽里的数据是在子组件定义的. 有时候作用域插槽很有用,比如使用Element-ui表格自定义模板时就用到了作用域插槽,Element-ui定义了每个单 ...
- jQuery 源码解析(二十九) 样式操作模块 尺寸详解
样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下尺寸这一块 jQuery通过样式操作模块里的尺寸相关的API可以很方便的获取一个元素的宽度.高度,而且可以很方便的区分padding.b ...
- jQuery 源码解析(二十八) 样式操作模块 scrollLeft和scrollTop详解
scrollLeft和scrollTop用于获取/设置滚动条的,如下: scrollLeft(val) ;读取或设置整个页面的水平滚动条距离 scrollTop(val) ;读取或设置整个页面的垂直滚 ...
- jQuery 源码解析(二十二) DOM操作模块 复制元素 详解
本节说一下DOM操作模块里的复制元素子模块,该模块可以复制一个DOM节点,并且可选择的设置是否复制其数据缓存对象(包含事件信息)和是否深度复制(子孙节点等),API如下: $.clone(elem, ...
- Vue.js 源码分析(二十八) 高级应用 transition组件 详解
transition组件可以给任何元素和组件添加进入/离开过渡,但只能给单个组件实行过渡效果(多个元素可以用transition-group组件,下一节再讲),调用该内置组件时,可以传入如下特性: n ...
- Vue.js 源码分析(二十四) 高级应用 自定义指令详解
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 官网介绍的比较抽象,显得很高大上,我个人对自定义指令的理解是:当自定义指令作用在一些DOM元素或组件上 ...
- Vue.js 源码分析(二十九) 高级应用 transition-group组件 详解
对于过度动画如果要同时渲染整个列表时,可以使用transition-group组件. transition-group组件的props和transition组件类似,不同点是transition-gr ...
随机推荐
- 【Eclipse】Spring Tool Suite插件
Spring Tool Suite插件 最新下载地址:https://spring.io/tools3/sts/all 以前下载地址:https://spring.io/tools3/sts/lega ...
- vscode代码自动补全失效
前段时间,朋友说自己的vscode突然出现了代码不能自动补全的问题(主要是js,其他语言也可以参考) 症状表现为,刚打开vscode有自动补全,过了一会,突然就没了,反反复复 解决过程也是相当坎坷了 ...
- 如何使用Jmeter进行压力测试
Jmeter做压力测试的操作:Jmeter不仅可以做接口测试,还可以做压力测试,下面介绍介绍如何jmeter进行简单地压力测试.具体步骤如下: 第一步:添加请求,这里不介绍具体步骤,详见(https: ...
- 骚年,如果你还不懂一些java常识?中了奖也无法兑换
今天下午约着几个朋友一起去看叶问4,结果碰到了一个有趣的事情,正好和java有关所以写一篇文章来记录一下. 事件:我和朋友小李.小王一起去看电影 时间:2019/12/21 地点:H市某家电影院 起因 ...
- [ASP.NET Core 3框架揭秘] 依赖注入[2]:IoC模式
正如我们在<依赖注入:控制反转>提到过的,很多人将IoC理解为一种"面向对象的设计模式",实际上IoC不仅与面向对象没有必然的联系,它自身甚至算不上是一种设计模式.一般 ...
- 前后端分离及Element的使用
1. 前后端分离 1.1 什么是前后端分离 在传统的web应用开发中,大多数的程序员会将浏览器作为前后端的分界线.将浏览器中为用户进行页面展示的部分称之为前端,而将运行在服务器,为前端提供业务逻辑和数 ...
- JavaWeb学习——页面跳转方式
JavaWeb学习——页面跳转方式 摘要:本文主要学习了请求转发和响应重定向,以及两者之间的区别. 请求转发 相关方法 使用HttpServletRequest对象的 getRequestDispat ...
- 林克的小本本之——记一些基础的linux命令
查看shell cat /etc/shells 查看系统支持的shell echo $SHELL 查看目前正在使用的shell 快捷键 Ctrl+a 跳到行首 Ctrl+e 跳到行尾 Ctrl+u 删 ...
- requests第三方库
requests第三方库 简介: requests是一个优雅而简单的Python 第三方HTTP请求库,专为人类而构建. requests的官方文档同样也非常的完善详尽,而且少见的有中文官方文档:ht ...
- Python 下JSON的两种编解码方式实例解析
概念 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于人阅读和编写.在日常的工作中,应用范围极其广泛.这里就介绍python下它的两种编解码方法: ...