jquery 学习(五) - CSS 操作

/*CSS样式*/
<style> ???????body{ ???????????margin: 0; ???????} ???????div{ ???????????width: 100%; ???????????height: 2000px; ???????????background-color: aquamarine; ???????????margin: 0; ???????} ???????.a1{ ???????????position: fixed; ???????????right: 20px; ???????????bottom: 20px; ???????????width: 90px; ???????????height: 30px; ???????????background-color: darkgoldenrod; ???????????color: white; ???????} ???????.ds{ ??????????display: none; ???????} ???</style>
/*HTML*/<div></div><div> ???<button class="a1 ds" onclick="f2()">返回顶部</button></div>

//CSS 操作: ???//样式操作: ???????$("").css({属性:值}) ???//偏移量属性 ???????$("").offset.属性 ???????//相对于视图的偏移量 ???????$("").position.属性 ???????//相对于父标签的偏移量 ???//尺寸大小 ???????$("").height(‘数值‘) ???????$("").width(‘数值‘) ???????$("").innerHeight(‘数值‘) ???????$("").innerWidth(‘数值‘) ???????$("").outerHeight(‘数值‘) ???????$("").outerWidth(‘数值‘) ???//滚动条 ???$("").scrollTop(数值) ???$("").scrollLeft(数值) ???//必须定义到windows事件里 ???//windows onscroll 监听事件 ???window.onscroll=function f() { ???????var num = $(window).scrollTop(); ???????if (num >500){ ???????????// $(‘.a1‘).removeClass(‘ds‘) ???????????$(‘.a1‘).show(1000) ???????} ???????else { ???????????// $(‘.a1‘).addClass(‘ds‘) ???????????$(‘.a1‘).hide(1000) ???}}; ???function f2() { ???????$(window).scrollTop(0) ???}