设置元素的宽和高 元素的left和top 元素卷曲出去的值 为元素绑定事件
生活随笔
收集整理的這篇文章主要介紹了
设置元素的宽和高 元素的left和top 元素卷曲出去的值 为元素绑定事件
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
設(shè)置元素的寬和高
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div {width: 200px;height: 100px;background-color: darkorchid;}</style><script src="jquery-1.12.1.js"></script><script>//元素的寬和高,jQuery中封裝了方法/*** .width()可以獲取也可以設(shè)置元素的寬* .height()可以獲取也可以設(shè)置元素的高*/// 把獲取元素計(jì)算后的樣式屬性值的兼容代碼:// window.getComputedStyle();// document.getElementById("btn").currentStyle$(function(){$("#btn").click(function(){// 點(diǎn)擊按鈕,設(shè)置div的寬和高為原來的2倍// .css方法獲取的寬和高實(shí)際上是字符串類型// 獲取div的寬和高// var w = $("#dv").css("width");// var h = $("#dv").css("height");// // console.log(w);// // 設(shè)置div的寬和高// $("#dv").css("width",(parseInt(w)*2)+"px");// $("#dv").css("height",(parseInt(h)*2)+"px");// 先獲取// var w = $("#dv").width();// var h = $("#dv").height();// console.log(w);// $("#dv").css("width",w*2);// $("#dv").css("height",h*2);// $("#dv").width("500px");// $("#dv").height("500px");});});</script> </head> <body> <input type="button" value="設(shè)置元素的寬和高" id="btn"> <div id="dv"></div></body> </html>元素的left和top
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}div {width: 200px;height: 100px;background-color: indianred;margin-top: 20px;position: absolute;left: 100px;top: 200px;}</style><script src="jquery-1.12.1.js"></script><script>// 點(diǎn)擊按鈕,設(shè)置div的left和top的值是原來的2倍$(function(){$("#btn").click(function(){// 獲取left和top ---- 獲取的仍然是字符串類型// var l = $("#dv").css("left");// var t = $("#dv").css("top");// // console.log(l);// var left1 = parseInt(l)*2// var top1 = parseInt(t)*2;// $("#dv").css("left",left1+"px");// $("#dv").css("top",top1+"px");// 該方法獲取的是一個(gè)對(duì)象,該對(duì)象中有兩個(gè)屬性,left和top// left和top包含left和margin-left和top和margin-top的值// console.log($("#dv").offset().left);// $("#dv").css("left",$("#dv").offset().left*2);// $("#dv").css("top",$("#dv").offset().top*2);// $("#dv").offset({"left":500,"top":250});});});/*** 可以設(shè)置,也可以獲取* .width()是元素的寬* .height()是元素的高** .offset()---->獲取的是對(duì)象,可以設(shè)置,也可以獲取* .offset({"left":值,"top":"值"});設(shè)置*/</script> </head> <body> <input type="button" value="顯示效果" id="btn"> <div id="dv"></div></body> </html>元素卷曲出去的值
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div {width: 200px;height: 200px;border: 1px solid red;overflow: auto;}</style><script src="jquery-1.12.1.js"></script><script>// scroll系列:/*** DOM中的* scrollLeft:向左卷曲出去距離的值* scrollTop:向上卷曲出去距離的值* scrollWidth:元素中內(nèi)容的實(shí)際的寬* scrollHeight:元素中內(nèi)容的實(shí)際的高* */</script><script>// $(function(){// $("#btn").click(function(){// // $("#dv").scroll();// // console.log($("#dv").scrollLeft());// // console.log($("#dv").scrollTop());// // 獲取元素向上卷曲出去的距離,scrollTop()---->方法,數(shù)字類型// // 獲取元素向左卷曲出去的距離,scrollLeft()---->方法,數(shù)字類型// // console.log($("#dv").scrollWidth());// });// });// div滾動(dòng)上下滾動(dòng)條的時(shí)候,一直獲取他的向上卷曲出去的值$(function(){$("#dv").onscroll = function(){console.log($(this).scrollTop());console.log("哈哈");};});</script> </head> <body> <input type="button" value="顯示效果" id="btn"> <div id="dv">哈哈,我讓你先得瑟一會(huì)哈哈,我讓你先得瑟一會(huì)哈哈,我讓你先得瑟一會(huì)哈哈,我讓你先得瑟一會(huì)哈哈,我讓你先得瑟一會(huì)哈哈,我讓你先得瑟一會(huì)哈哈,我讓你先得瑟一會(huì)哈哈,我讓你先得瑟一會(huì)哈哈,我讓你先得瑟一會(huì)哈哈,我讓你先得瑟一會(huì)哈哈,我讓你先得瑟一會(huì)哈哈,我讓你先得瑟一會(huì)哈哈,我讓你先得瑟一會(huì) </div></body> </html>為元素綁定事件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script src="jquery-1.12.1.js"></script><script>$(function(){// 為按鈕綁定鼠標(biāo)進(jìn)入,鼠標(biāo)離開,點(diǎn)擊事件// 第一種寫法// $("#btn").mouseenter(function(){// $(this).css("backgroundColor","red");// });// $("#btn").mouseleave(function(){// $(this).css("backgroundColor","green");// });// $("#btn").click(function(){// alert("我被點(diǎn)了");// });// 第二種寫法// $("#btn").mouseenter(function(){// $(this).css("backgroundColor","red");// }).mouseleave(function(){// $(this).css("backgroundColor","green");// }).click(function(){// alert('被點(diǎn)了');// });// 第三種方法:bind方法綁定// $("#btn").bind("click",function(){// alert('oh oh');// });// $("#btn").bind("mouseenter",function(){// $(this).css("backgroundColor","red");// });// $("#btn").bind("mouseleave",function(){// $(this).css("backgroundColor","green");// });// 第四種寫法// $("#btn").bind("click",function(){// alert("click me");// }).bind("mouseenter",function(){// $(this).css("backgroundColor","red");// }).bind("mouseleave",function(){// $(this).css("backgroundColor","green");// });$("#btn").bind({"click":function(){alert("click bind");},"mouseenter":function(){$(this).css("backgroundColor","red");},"mouseleave":function(){$(this).css("backgroundColor","green");}});});</script> </head> <body> <input type="button" value="顯示效果" id="btn"></body> </html>?
總結(jié)
以上是生活随笔為你收集整理的设置元素的宽和高 元素的left和top 元素卷曲出去的值 为元素绑定事件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 元素的选中问题 元素选中的问题 切换复选
- 下一篇： 为元素绑定多个相同事件 绑定事件的另一种