码迷,mamicode.com
首页 > Web开发 > 详细

jQuery慢慢啃之CSS(五)

时间:2015-02-02 19:36:29      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:

1.css(name|pro|[,val|fn])//访问匹配元素的样式属性

$("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.jQuery.cssHooks//直接向 jQuery 中添加钩子,用于覆盖设置或获取特定 CSS 属性时的方法,目的是为了标准化 CSS 属性名或创建自定义属性。

 

3.offset([coordinates])//获取匹配元素在当前视口的相对偏移

<p>Hello</p><p>2nd Paragraph</p>

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>

 $("p:last").offset({ top: 10, left: 30 });//获取相对值

 

4.position()//获取匹配元素相对父元素的偏移。

var p = $("p:first");
var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );

 

5.scrollTop([val])//获取匹配元素相对滚动条顶部的偏移

var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );

$("div.demo").scrollTop(300);//设置相对滚动条顶部的偏移,不一定是浏览器

6.scrollLeft([val])//获取匹配元素相对滚动条左侧的偏移

var p = $("p:first");
$("p:last").text( "scrollLeft:" + p.scrollLeft() );

$("div.demo").scrollLeft(300);

 

7.height([val|fn])//取得匹配元素当前计算的高度值

$("p").height();//获取第一段的高

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

 

8.width([val|fn])//取得第一个匹配元素当前计算的宽度值(px)。

 

9.innerHeight()//获取第一个匹配元素内部区域高度(包括补白、不包括边框)。

var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );

 

10.innerWidth()//获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。

var p = $("p:first");
$("p:last").text( "innerWidth:" + p.innerWidth() );

 

11.outerHeight([options])//获取第一个匹配元素外部高度(默认包括补白和边框)。

var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );

 

12.outerWidth([options])//获取第一个匹配元素外部宽度(默认包括补白和边框)。

var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );

 

jQuery慢慢啃之CSS(五)

标签:

原文地址:http://www.cnblogs.com/yuliantao/p/4268243.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!