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 相关文章推荐
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
简明json介绍
Sep 28 Javascript
js实现网页自动刷新可制作节日倒计时效果
May 27 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
AngularJS中ng-class用法实例分析
Jul 06 Javascript
小程序实现页面顶部选项卡效果
Nov 06 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
vue实现打地鼠小游戏
Aug 21 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 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 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
jquery默认校验规则整理
2014/03/24 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
javascript实现循环广告条效果
2017/12/12 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
打开电脑上的QQ的python代码
2013/02/10 Python
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
Python中asyncore的用法实例
2014/09/29 Python
Python的面向对象思想分析
2015/01/14 Python
在Django的上下文中设置变量的方法
2015/07/20 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
Python线程threading模块用法详解
2020/02/26 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
HTML5新增加的功能详解
2016/09/05 HTML / CSS
英国健身超市:Fitness Superstore
2019/06/17 全球购物
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
关于.NET, HTML的五个问题
2012/08/29 面试题
校运会入场式解说词
2014/02/10 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
再见,2019我们不负使命;你好,2020我们砥砺前行
2020/01/03 职场文书