jquery的css操作
阿新 • • 發佈：2021-07-26
css操作
CSS $("").css(name|pro|[,val|fn]) 位置 $("").offset([coordinates]) $("").position() $("").scrollTop([val]) $("").scrollLeft([val]) 尺寸 $("").height([val|fn]) $("").width([val|fn]) $("").innerHeight() $("").innerWidth() $("").outerHeight([soptions]) $("").outerWidth([options])
例項返回頂部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-2.2.3.js"></script> <script> window.onscroll=function(){ var current=$(window).scrollTop(); console.log(current)if (current>100){ $(".returnTop").removeClass("hide") } else { $(".returnTop").addClass("hide") } } function returnTop(){ // $(".div1").scrollTop(0); $(window).scrollTop(0) }</script> <style> body{ margin: 0px; } .returnTop{ height: 60px; width: 100px; background-color: darkgray; position: fixed; right: 0; bottom: 0; color: greenyellow; line-height: 60px; text-align: center; } .div1{ background-color: orchid; font-size: 5px; overflow: auto; width: 500px; } .div2{ background-color: darkcyan; } .div3{ background-color: aqua; } .div{ height: 300px; } .hide{ display: none; } </style> </head> <body> <div class="div1 div"> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> </div> <div class="div2 div"></div> <div class="div3 div"></div> <div class="returnTop hide" onclick="returnTop();">返回頂部</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .div1{ height: 100px; width: 100px; background-color: red; } .div3{ height: 120px; width: 120px; background-color: seagreen; } .div2{ position: relative; } .div4{ background-color: aquamarine; width: 150px; height: 150px; padding: 5px; margin: 6px; border: 4px solid green; } .div5{ width: 50%; height: 200px; overflow: auto; } .div6{ width: 100%; height: 1000px; } .div5{ background-color: aquamarine; } .div6{ background-color: chocolate; } .div7{ width: 90px; height: 60px; position: fixed; right: 20px; bottom: 20px; background-color: yellow; text-align: center; /*文字橫向居中*/ line-height: 60px; /*文字行高*/ } .hide{ display: none; } </style> </head> <body> <!-- <div class="div1"></div>--> <!-- <div class="div2">--> <!-- <div class="div3"></div>--> <!-- </div>--> <!-- <div class="div4"></div>--> <!-- <script src="jquery-3.3.1.js"></script>--> <!-- <script>--> <!-- // 計算離視口偏移量--> <!-- console.log($('.div1').offset().left); // 0--> <!-- console.log($('.div1').offset().top); // 0--> <!-- console.log($('.div3').offset().left); // 0--> <!-- console.log($('.div3').offset().top); // 100--> <!-- // 計算離已定位的父標籤的偏移量(注意是已定位)--> <!-- console.log($('.div3').position().left); // 0--> <!-- console.log($('.div3').position().top); // 0--> <!-- // 計算標籤尺寸--> <!-- console.log($('.div4').height()); // 150(width: 150px)--> <!-- // console.log($('.div4').height('200px')) // 高度變成200px--> <!-- console.log($('.div4').innerHeight()); // 160(width: 150px+padding: 5px+padding: 5px)--> <!-- console.log($('.div4').outerHeight()); // 168(width: 150px+padding: 5px+padding: 5px+border: 4px+border: 4px)--> <!-- console.log($('.div4').outerHeight(true)); // 180(width: 150px+padding: 5px+padding: 5px+border: 4px+border: 4px+margin: 6px+margin: 6px)--> <!-- </script>--> <!--滾動條監聽並返回頂部例項--> <div class="div5"> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> </div> <div class="div6"> <button onclick="returnTop1()">return</button> </div> <div class="div7 hide" onclick="returnTop()">返回頂部</div> <script src="jquery-3.3.1.js"></script> <script> window.onscroll=function () { // onscroll 事件在元素滾動條在滾動時觸發(window物件事件) let num=$(window).scrollTop(); // 左右滾動條是scrollLeft // scrollTop() 方法返回或設定匹配元素的滾動條的垂直位置(jquery) console.log(num); if (num>100) { $('.div7').removeClass('hide'); }else{ $('.div7').addClass('hide'); }; }; function returnTop() { $(window).scrollTop(0); }; function returnTop1() { $('.div5').scrollTop(0); }; </script> </body> </html>while True: print('studying...')