jQuery-CSS介绍(css、scrollTop()scrollLeft()、heightwidth(inner、outter))

it2022-05-09  63

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

最新回复(0)