设置元素的宽和高元素的left和top 元素卷曲出去的值为元素绑定事件

设置元素的宽和高

<!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()可以获取也可以设置元素的宽* .height()可以获取也可以设置元素的高*/// 把获取元素计算后的样式属性值的兼容代码:// window.getComputedStyle();// document.getElementById("btn").currentStyle$(function(){$("#btn").click(function(){// 点击按钮,设置div的宽和高为原来的2倍// .css方法获取的宽和高实际上是字符串类型// 获取div的宽和高// var w = $("#dv").css("width");// var h = $("#dv").css("height");// // console.log(w);// // 设置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="设置元素的宽和高" 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>// 点击按钮,设置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");// 该方法获取的是一个对象,该对象中有两个属性,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});});});/*** 可以设置,也可以获取* .width()是元素的宽* .height()是元素的高** .offset()---->获取的是对象,可以设置,也可以获取* .offset({"left":值,"top":"值"});设置*/</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:元素中内容的实际的宽* scrollHeight:元素中内容的实际的高* */</script><script>// $(function(){//     $("#btn").click(function(){//         // $("#dv").scroll();//         // console.log($("#dv").scrollLeft());//         // console.log($("#dv").scrollTop());//         // 获取元素向上卷曲出去的距离,scrollTop()---->方法,数字类型//         // 获取元素向左卷曲出去的距离,scrollLeft()---->方法,数字类型//         // console.log($("#dv").scrollWidth());//     });// });// div滚动上下滚动条的时候,一直获取他的向上卷曲出去的值$(function(){$("#dv").onscroll = function(){console.log($(this).scrollTop());console.log("哈哈");};});</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><script src="jquery-1.12.1.js"></script><script>$(function(){// 为按钮绑定鼠标进入,鼠标离开,点击事件// 第一种写法// $("#btn").mouseenter(function(){//     $(this).css("backgroundColor","red");// });// $("#btn").mouseleave(function(){//     $(this).css("backgroundColor","green");// });// $("#btn").click(function(){//     alert("我被点了");// });// 第二种写法// $("#btn").mouseenter(function(){//     $(this).css("backgroundColor","red");// }).mouseleave(function(){//     $(this).css("backgroundColor","green");// }).click(function(){//     alert('被点了');// });// 第三种方法: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>

设置元素的宽和高元素的left和top 元素卷曲出去的值为元素绑定事件相关推荐

Selenium基础之------(将浏览器最大化,设置浏览器固定宽、高,操控浏览器前进、后退)(转)
原文url:http://www.cnblogs.com/fnng/p/3171383.html 1,将浏览器最大化我们知道调用启动的浏览器不是全屏的,这样不会影响脚本的执行,但是有时候会影响我们& ...
java代码设置布局的宽和高
RelativeLayout.LayoutParams lp=new RelativeLayout.LayoutParams(dip2px(this,480),dip2px(this,300)) mP ...
【selenium】对浏览器的操作浏览器的最大化，设置浏览器的宽和高，浏览器的前进和后退，浏览器滚动条的控制
对浏览器的操作 from selenium import webdriver import timedriver = webdriver.Chrome() driver.get("https ...
NPOI设置单元格宽和高
1.设置单元格宽 1.1 Excel中单元格的宽实际就是列宽,HSSFSheet有个方法叫SetColumnWidth,共有两个参数:一个是列的索引(从0开始),一个是宽度. 示例: HSSFWork ...
jQuery获取与设置div的宽和高
前端页面开发时,通过jquery有两种方法获取与设置div的宽高:使用尺寸函数或使用css方法. 一.获取宽和高 1.1 尺寸函数: width() 获取宽度 height() 获取高度 1. ...
AndroidStudio_安卓原生开发_Android开发中界面调试很别扭? 设置应用屏宽屏高_应用大小_design_width_in_dp---Android原生开发工作笔记140
如果你开发的时候,发现自己调界面的时候,怎么调都比较奇怪,有可能是这个设置导致的: <applicationandroid:icon="@mipmap/ic_launcher" ...
设置LinearLayout的宽和高
其实很简单,只不过不明白为什么要这么复杂才能设置. LinearLayout mainLayout = findViewById(R.id.MainLayout);ViewGroup.LayoutPa ...
关于HTML5中Canvas的宽、高设置问题
Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法: 方法一: 1 <canvas width="500" height="500& ...
为元素绑定多个相同事件绑定事件的另一种方式复习介绍元素的事件绑定
为元素绑定多个相同事件 <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...

设置元素的宽和高元素的left和top 元素卷曲出去的值为元素绑定事件

设置元素的宽和高元素的left和top 元素卷曲出去的值为元素绑定事件相关推荐

最新文章

热门文章

设置元素的宽和高 元素的left和top 元素卷曲出去的值 为元素绑定事件

设置元素的宽和高 元素的left和top 元素卷曲出去的值 为元素绑定事件相关推荐

最新文章

热门文章

设置元素的宽和高元素的left和top 元素卷曲出去的值为元素绑定事件

设置元素的宽和高元素的left和top 元素卷曲出去的值为元素绑定事件相关推荐