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