juqery 学习之六 CSS--css、位置、宽高


Posted in Javascript onFebruary 11, 2011

css(name)
访问第一个匹配元素的样式属性。

--------------------------------------------------------------------------------

Return a style property on the first matched element.
返回值
String

参数
name (String) : 要访问的属性名称

示例
取得第一个段落的color样式属性的值。

jQuery 代码:

$("p").css("color");
-------------------------------------------------------------------------------------------------------------------------------------------------
css(properties)
把一个“名/值对”对象设置为所有匹配元素的样式属性。
这是一种在所有匹配的元素上设置大量样式属性的最佳方式。

--------------------------------------------------------------------------------

Set a key/value object as style properties to all matched elements.
This is the best way to set several style properties on all matched elements.
返回值
jQuery

参数
properties (Map) : 要设置为样式属性的名/值对

示例
将所有段落的字体颜色设为红色并且背景为蓝色。

jQuery 代码:

$("p").css({ color: "#ff0011", background: "blue" });

--------------------------------------------------------------------------------

如果属性名包含 "-"的话,必须使用引号:

jQuery 代码:

$("p").css({ "margin-left": "10px", "background-color": "blue" });
-------------------------------------------------------------------------------------------------------------------------------------------------
css(name,value)
在所有匹配的元素中,设置一个样式属性的值。
数字将自动转化为像素值

--------------------------------------------------------------------------------

Set a single style property to a value on all matched elements.
If a number is provided, it is automatically converted into a pixel value.
返回值
jQuery

参数
name (value) : 属性名

value (String, Number) : 属性值

示例
将所有段落字体设为红色

jQuery 代码:

$("p").css("color","red");
-------------------------------------------------------------------------------------------------------------------------------------------------
offset()
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。

--------------------------------------------------------------------------------

Get the current offset of the first matched element relative to the viewport.
The returned object contains two Integer properties, top and left. The method works only with visible elements.
返回值
Object{top,left}

示例
获取第二段的偏移

HTML 代码:

<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:

var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
结果:

<p>Hello</p><p>left: 0, top: 35</p>
-------------------------------------------------------------------------------------------------------------------------------------------------
height()
取得第一个匹配元素当前计算的高度值(px)。
在 jQuery 1.2 以后可以用来获取 window 和 document 的高

--------------------------------------------------------------------------------

Get the current computed, pixel, height of the first matched element.
In jQuery 1.2, this method is able to find the height of the window and document.
返回值
Integer

示例
获取第一段的高

jQuery 代码:

$("p").height();

--------------------------------------------------------------------------------

获取文档的高

jQuery 代码:

$(document).height();
把所有段落的高设为 20:

jQuery 代码:

$("p").height(20);
-------------------------------------------------------------------------------------------------------------------------------------------------
width()
取得第一个匹配元素当前计算的宽度值(px)。
在 jQuery 1.2 以后可以用来获取 window 和 document 的宽

--------------------------------------------------------------------------------

Get the current computed, pixel, width of the first matched element.
In jQuery 1.2, this method is able to find the width of the window and document.
返回值
Integer

示例
获取第一段的宽

jQuery 代码:

$("p").width();

--------------------------------------------------------------------------------

获取当前窗口的宽

jQuery 代码:

$(window).width();
将所有段落的宽设为 20:

jQuery 代码:

$("p").width(20);

Javascript 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 Javascript
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
Aug 28 Javascript
自己整理的一个javascript日期处理函数
Oct 16 Javascript
window.location的重写及判断location是否被重写
Sep 04 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
浅析vue给不同环境配置不同打包命令
Aug 17 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 Javascript
微信小程序日历插件代码实例
Dec 04 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 #Javascript
juqery 学习之五 文档处理 插入
Feb 11 #Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 #Javascript
Javascript面向对象之四 继承
Feb 08 #Javascript
javascript面向对象之二 命名空间
Feb 08 #Javascript
javascript中的对象创建 实例附注释
Feb 08 #Javascript
kmock javascript 单元测试代码
Feb 06 #Javascript
You might like
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
基于JQuery 选择器使用说明介绍
2013/04/18 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
node实现基于token的身份验证
2018/04/09 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
python 字符串常用函数详解
2019/09/11 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
匡威英国官网:Converse英国
2018/12/02 全球购物
艺术设计专业毕业生推荐信
2014/07/08 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
Mysql文件存储图文详解
2021/06/01 MySQL
一条慢SQL语句引发的改造之路
2022/03/16 MySQL