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(四)的更多相关文章

  1. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...

  2. 【转发】JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...

  3. JQuery中操作Css样式

    //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...

  4. 使用原生实现jquery中的css方法

    由于jquery放在mobile页面上,有时候还是显得有点大,所以今天尝试使用原生来开发,但是习惯了jquery之后,转用原生开发之后,发现原生中,找不到可以替代jquery的css方法,于是对原生的 ...

  5. JQuery:JQuery 中的CSS()方法

    JQuery:CSS()方法jQuery css()方法:css()方法设置或返回被选元素的一个或多个样式属性.1.返回 CSS 属性如需返回指定的 CSS 属性的值,请使用如下语法:css(&quo ...

  6. js中的style与jQuery中的css

    使用jQuery选择器时,可以直接使用css函数(注意不能使用$("p")[1].css()) $("p").css("background-colo ...

  7. jQuery中的CSS(二)

    一:获取样式和设置样式

  8. Jquery中css()方法获取边框长度

    1. JQuery中可以使用css()方法获取块元素的边框宽度,如下: $("divMode").css("border-left-width");//左边框长 ...

  9. jquery中的属性和css

    jQuery中的属性用于获取或设置元素的属性 1.attr(),获取或设置所有相匹配的元素的属性值:removeAttr("attr"),移除所有相匹配的元素的属性 //html ...

随机推荐

  1. LeetCode 1248. 统计「优美子数组」

    地址 https://www.acwing.com/solution/leetcode/content/5801/ 题目描述给你一个整数数组 nums 和一个整数 k. 如果某个子数组中恰好有 k 个 ...

  2. C++ 的 +,加号重载示例

    #include <iostream> // overloading "operator + " // 要考虑加法的形式 // a+1 // a+a // 1+a // ...

  3. 阿里云服务器 ECS Jenkins 安装教程

    参考:https://blog.csdn.net/liqing0013/article/details/83930419

  4. os 和 sys 的模块使用方法和模块

    os  的模块  方法 os.remove()删除文件 os.rename()重命名文件 os.walk()生成目录树下的所有文件名 os.chdir()改变目录 os.mkdir/maked ...

  5. 前端 web mime类型引起的 常见404错误

    mime 类型设置参考https://www.w3school.com.cn/media/media_mimeref.asp

  6. ReactNative: 使用Text文本组件

    一.简言 初学RN,一切皆新.Text组件主要用于显示文本,Text组件的重要性不言而喻,无论是Web开发还是客户端开发,都离不开它.它具有响应特性,也即表现为当它被触摸时是否显示为高亮状态.在Web ...

  7. 用OC实现一个栈:结合单链表创建动态栈

    一.介绍 栈是一种数据存储结构,存储的数据具有先进后出的特点.栈一般分为动态栈和静态栈. 静态栈比较好理解,例如用数组实现的栈.动态栈可以用链表来实现. 方式:固定base指针,每次更改top指向入栈 ...

  8. 打开Github网站反应慢的问题

    解决办法: 为了提高速度,可以使用HOSTS加速对Github网站加载的资源网站域名解析. 具体做法: 修改  C:\Windows\System32\drivers\etc  中的hosts文件(P ...

  9. [07]ASP.NET Core 进程外(out-of-process)托管

    ASP.NET Core 进程外(out-of-process)托管 本文作者:梁桐铭- 微软最有价值专家(Microsoft MVP) 文章会随着版本进行更新,关注我获取最新版本 本文出自<从 ...

  10. Docker容器 MySQL中文乱码解决方案

    docker exec进入容器 sudo docker exec -it 588340b778f6 bash 执行以下命令,将 character-set-server=utf8 写入mysql配置文 ...