jQuery-CSS介绍（css、scrollTop()/scrollLeft()、height/width（inner、outter））

74 阅读 0 评论 49 点赞

我是靠谱客的博主香蕉音响，最近开发中收集的这篇文章主要介绍jQuery-CSS介绍（css、scrollTop()/scrollLeft()、height/width（inner、outter）），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、jQuery的CSS

1、css

作用：访问匹配元素的样式属性

示例：

//以p标签为例
//1、获取属性值
$("p").css("color");

//2、设置单个属性值
$("p").css("color","red");

//3、设置多个属性值
$("p").css({ color: "#ff0011", background: "blue" });

//4、通过事件改变属性值
  $("div").click(function() {
    $(this).css({
      width: function(index, value) {
        return parseFloat(value) * 1.2;
      }, 
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }
    });
  });

2、scrollTop()/scrollLeft()

作用：获取匹配元素相对滚动条顶部/左边的偏移。

//先给<body style"width:2000px,height:2000px">,以便获得滑动条
//以scrollTop()为例
$(window).scroll(function(){
			// scrollTop
			console.log($(window).scrollTop())
		})
//上下滑动滑动条在console中看到偏移量

3、height/width/innerWidth/innerHeight/outerHeight/outerWidth

作用：获取宽高数值

//设置一个div<div style="width: 100px; height: 100px; background: green; padding: 10px; border: 10px solid red; margin: 10px;"></div>
// 以宽为例
console.log( $('div').width() )  // 100
console.log( $('div').innerWidth() )  // 120
console.log( $('div').outerWidth() )  // 140
console.log( $('div').outerWidth(true) )  // 160
//在console中获得相关尺寸数值