jQuery中的CSS(四)
1. css(name|pro|[,val|fn]), 访问匹配元素的样式属性
jQuery 1.8中,当你使用CSS属性在css()或animate()中,我们将根据浏览器自动加上前缀(在适当的时候),比如("user-select", "none"); 在Chrome/Safari浏览器中我们将设置为"-webkit-user-select", Firefox会使用"-moz-user-select", IE10将使用"-ms-user-select".
参数说明:
- name:要访问的属性名称
- properties:要设置样式的键值对对象,{"":""}
- name,value:属性名,属性值
- name,function(index, value):
- 属性名
- 此函数返回要设置的属性值。接受两个参数,index为元素在对象集合中的索引位置,value是原先的属性值。
$("p").css("color"); $("p").css({ "color": "#ff0011", "background": "blue" }); $("p").css("color","red"); $("div").click(function() {
$(this).css({
width: function(index, value) {
return parseFloat(value) * 1.2;
},
height: function(index, value) {
return parseFloat(value) * 1.2;
}
});
});
2. offset([coordinates]), 获取匹配元素在当前视口的相对偏移
返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
3. position(), 获取匹配元素相对父元素的偏移
返回的对象包含两个整型属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效
var p = $("p:first");
var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );
4. scrollTop([val]), 获取匹配元素相对滚动条顶部的偏移
此方法对可见和隐藏元素均有效。
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() ); $("div.demo").scrollTop(300);
5. scrollLeft([val]), 获取匹配元素相对滚动条左侧的偏移
此方法对可见和隐藏元素均有效。
var p = $("p:first");
$("p:last").text( "scrollLeft:" + p.scrollLeft() ); $("div.demo").scrollLeft(300);
6. height([val|fn]), 取得匹配元素当前计算的高度值(px)
在 jQuery 1.2 以后可以用来获取 window 和 document 的高
function(index, height):返回用于设置高度的一个函数。接收元素的索引位置和元素旧的高度值作为参数。
$("p").height(); $("p").height(20); $("button").click(function(){
$("p").height(function(n,c){
return c+10;
});
})
7. width([val|fn]), 取得第一个匹配元素当前计算的宽度值(px)
在 jQuery 1.2 以后可以用来获取 window 和 document 的宽
function(index, height):返回用于设置宽度的一个函数。接收元素的索引位置和元素旧的宽度值作为参数。
$("p").width(); $("p").width(20); $("button").click(function(){
$("p").width(function(n,c){
return c+10;
});
});
8. innerHeight(), 获取第一个匹配元素内部区域高度(包括补白、不包括边框)
此方法对可见和隐藏元素均有效
9. innerWidth(), 获取第一个匹配元素内部区域宽度(包括补白、不包括边框)
此方法对可见和隐藏元素均有效
10. outerHeight([options]), 获取第一个匹配元素外部高度(默认包括补白和边框)
此方法对可见和隐藏元素均有效。
参数说明:
- options:Boolean,设置为 true 时,计算边距在内。
var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );
11. outerWidth([options]),获取第一个匹配元素外部宽度(默认包括补白和边框)
此方法对可见和隐藏元素均有效
参数说明:
- options:Boolean,设置为 true 时,计算边距在内。
var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );
jQuery中的CSS(四)的更多相关文章
- JQuery中操作Css样式的方法
JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...
- 【转发】JQuery中操作Css样式的方法
JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...
- JQuery中操作Css样式
//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...
- 使用原生实现jquery中的css方法
由于jquery放在mobile页面上,有时候还是显得有点大,所以今天尝试使用原生来开发,但是习惯了jquery之后,转用原生开发之后,发现原生中,找不到可以替代jquery的css方法,于是对原生的 ...
- JQuery:JQuery 中的CSS()方法
JQuery:CSS()方法jQuery css()方法:css()方法设置或返回被选元素的一个或多个样式属性.1.返回 CSS 属性如需返回指定的 CSS 属性的值,请使用如下语法:css(&quo ...
- js中的style与jQuery中的css
使用jQuery选择器时,可以直接使用css函数(注意不能使用$("p")[1].css()) $("p").css("background-colo ...
- jQuery中的CSS(二)
一:获取样式和设置样式
- Jquery中css()方法获取边框长度
1. JQuery中可以使用css()方法获取块元素的边框宽度,如下: $("divMode").css("border-left-width");//左边框长 ...
- jquery中的属性和css
jQuery中的属性用于获取或设置元素的属性 1.attr(),获取或设置所有相匹配的元素的属性值:removeAttr("attr"),移除所有相匹配的元素的属性 //html ...
随机推荐
- LeetCode 1248. 统计「优美子数组」
地址 https://www.acwing.com/solution/leetcode/content/5801/ 题目描述给你一个整数数组 nums 和一个整数 k. 如果某个子数组中恰好有 k 个 ...
- C++ 的 +,加号重载示例
#include <iostream> // overloading "operator + " // 要考虑加法的形式 // a+1 // a+a // 1+a // ...
- 阿里云服务器 ECS Jenkins 安装教程
参考:https://blog.csdn.net/liqing0013/article/details/83930419
- os 和 sys 的模块使用方法和模块
os 的模块 方法 os.remove()删除文件 os.rename()重命名文件 os.walk()生成目录树下的所有文件名 os.chdir()改变目录 os.mkdir/maked ...
- 前端 web mime类型引起的 常见404错误
mime 类型设置参考https://www.w3school.com.cn/media/media_mimeref.asp
- ReactNative: 使用Text文本组件
一.简言 初学RN,一切皆新.Text组件主要用于显示文本,Text组件的重要性不言而喻,无论是Web开发还是客户端开发,都离不开它.它具有响应特性,也即表现为当它被触摸时是否显示为高亮状态.在Web ...
- 用OC实现一个栈:结合单链表创建动态栈
一.介绍 栈是一种数据存储结构,存储的数据具有先进后出的特点.栈一般分为动态栈和静态栈. 静态栈比较好理解,例如用数组实现的栈.动态栈可以用链表来实现. 方式:固定base指针,每次更改top指向入栈 ...
- 打开Github网站反应慢的问题
解决办法: 为了提高速度,可以使用HOSTS加速对Github网站加载的资源网站域名解析. 具体做法: 修改 C:\Windows\System32\drivers\etc 中的hosts文件(P ...
- [07]ASP.NET Core 进程外(out-of-process)托管
ASP.NET Core 进程外(out-of-process)托管 本文作者:梁桐铭- 微软最有价值专家(Microsoft MVP) 文章会随着版本进行更新,关注我获取最新版本 本文出自<从 ...
- Docker容器 MySQL中文乱码解决方案
docker exec进入容器 sudo docker exec -it 588340b778f6 bash 执行以下命令,将 character-set-server=utf8 写入mysql配置文 ...