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

最新推荐文章于 2024-07-29 03:39:22 发布

枫2928715868

最新推荐文章于 2024-07-29 03:39:22 发布

阅读量466

点赞数

分类专栏：学习日志文章标签： jQuery jQuery-CSS scrollTOP/scrollLeft height/width

本文链接：https://blog.csdn.net/hu1258123819/article/details/97155881

版权

学习日志专栏收录该内容

35 篇文章 6 订阅

订阅专栏

一、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中获得相关尺寸数值