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. windows下切换Python运行环境。

    1.首先确保你的系统里已经安装了Conda,打开命令行窗口,执行命令:conda --version 2.查看你的系统当前已有的Python环境,执行命令:conda info --envs,从图中我 ...

  2. Goldbach`s Conjecture(LightOJ - 1259)【简单数论】【筛法】

    Goldbach`s Conjecture(LightOJ - 1259)[简单数论][筛法] 标签: 入门讲座题解 数论 题目描述 Goldbach's conjecture is one of t ...

  3. vue项目实现路由按需加载的3种方式

    vue异步组件技术 ==== 异步加载vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件 /* vue异步组件技术 */ { ...

  4. IDEA2019 Maven项目出现Unable to import maven project: See logs for details解决办法

    问题1:Unable to import maven project: See logs for details 网上说,原因是IDEA2019和Maven3.6.2不兼容导致的,需要把Maven降级 ...

  5. Codeforces Round #602 (Div. 2, based on Technocup 2020 Elimination Round 3) A. Math Problem 水题

    A. Math Problem Your math teacher gave you the following problem: There are n segments on the x-axis ...

  6. 使用Runtime的objc_copyClassNamesForImage和objc_getClassList获取类

    一.介绍 objc_copyClassNamesForImage:拷贝动态库类列表,也即当前工程下自己创建的所有类 objc_getClassList:获取所有类列表,也即当前工程下所有类(含系统类. ...

  7. SqlServer PIVOT行转列

    PIVOT通过将表达式某一列中的唯一值转换为输出中的多个列来旋转表值表达式,并在必要时对最终输出中所需的任何其余列值执行聚合. 测试数据 INSERT INTO [TestRows2Columns] ...

  8. Java修饰符作用域

    作用域 当前类 同一package 子孙类 其他package public √ √ √ √ protected √ √ √ × friendly √ √ × × private √ × × × 修饰 ...

  9. WebJar的打包和使用

    前言 WebJar官网:https://www.webjars.org/,对于任何与Servlet 3兼容的容器,WEB-INF/lib目录中的webjar都会自动作为静态资源提供.这是因为WEB-I ...

  10. Spring5源码解析1-从启动容器开始

    从启动容器开始 最简单的启动spring的代码如下: @Configuration @ComponentScan public class AppConfig { } public class Mai ...