javascript 调整宽度和高度的div

最新推荐文章于 2024-07-08 18:01:35 发布
最新推荐文章于 2024-07-08 18:01:35 发布
阅读量2.3k 收藏 2
点赞数
文章标签： javascript div html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/keyake863/article/details/2849101
版权
 就是用js控制一下div的宽和高，可以用鼠标拖拽的，不多说了，代码如下：
  1. function getPosition(obj)
  2. { 
  3.     var top = 0,left = 0;
  4.     do 
  5.     {
  6.        top += obj.offsetTop;
  7.        left += obj.offsetLeft;
  8.     }
  9.     while ( obj = obj.offsetParent );      
  10.     var arr = new Array();      
  11.     arr[0] = top;
  12.     arr[1] = left;    
  13.     return arr;    
  14. }
  15. var moveFlag=false;
  17. var moveLeft=false;
  18. var moveRight=false;
  19. var moveTop=false;
  20. var moveBom=false;
  21. function ShowMouseStyle()
  22. {
  23.     var x=event.clientX;
  24.     var y=event.clientY;
  25.     var div=document.getElementById("main");
  26.     var divLeft= getPosition(div)[0];
  27.     var divTop=getPosition(div)[1];
  28.     var divRight=divLeft+parseInt(div.style.width);
  29.     var divBom=divTop+parseInt(div.style.height);
  30.     if(Math.abs(x-divLeft)<3||moveLeft) 
  31.     {
  32.           div.style.cursor="w-resize";
  33.           if(moveFlag) 
  34.           MoveLeft(divLeft,div);
  35.     }
  36.     else if(Math.abs(x-divRight)<3||moveRight) 
  37.     {   
  38.           div.style.cursor="w-resize";
  39.           if(moveFlag) 
  40.           MoveRight(divRight,div); 
  41.     }   
  42.     else if(Math.abs(y-10-divTop)<3||moveTop) 
  43.     {
  44.           div.style.cursor="n-resize";
  45.           if(moveFlag) 
  46.           MoveTop(divTop,div)
  47.     }
  48.     else if(Math.abs(y-5-divBom)<3||moveBom) 
  49.     {
  50.           div.style.cursor="n-resize";
  51.           if(moveFlag) 
  52.           MoveBom(divBom,div) 
  53.     } 
  54.     else
  55.     {
  56.          div.style.cursor="";
  57.     } 
  58. }
  59. function move(flag)
  60. {
  61.   moveFlag=flag;
  62.   if(!flag)
  63.   {
  64.      moveLeft=false;
  65.      moveRight=false;
  66.      moveTop=false;
  67.      moveBom=false;
  68.   }
  69. }
  70. function MoveLeft(leftPx,o)
  71. {
  72.    var r=leftPx-event.clientX;
  73.    if((parseInt(o.style.width)+r)>100&&(parseInt(o.style.width)+r)<600)
  74.    o.style.width=parseInt(o.style.width)+r;
  75.    moveLeft=true;
  76. }
  77. function MoveRight(rightPx,o)
  78. {
  79.    var r=event.clientX-rightPx;
  80.    if((parseInt(o.style.width)+r)>100&&(parseInt(o.style.width)+r)<600)
  81.    o.style.width=parseInt(o.style.width)+r;
  82.    moveRight=true;
  83. }
  84. function MoveTop(topPx,o)
  85. {
  86.    var r=event.clientY-topPx;
  87.    if((parseInt(o.style.height)+r)>100&&(parseInt(o.style.height)+r)<500)
  88.    o.style.height=parseInt(o.style.height)+r;
  89.    moveTop=true;
  90. }
  91. function MoveBom(bomPx,o)
  92. {
  93.    var r=event.clientY-bomPx;
  94.    if((parseInt(o.style.height)+r)>100&&(parseInt(o.style.height)+r)<500)
  95.    o.style.height=parseInt(o.style.height)+r;
  96.    moveBom=true;
  97. }
html代码：
  1. <body onmousemove="ShowMouseStyle()" onmousedown="move(true)"  onmouseup="move(false)">
  3. <div id="main" style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid; width:101px; height:101px;">
  5. </div>
  6. </body>
--------------------------结束------------------------
keyake863
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
默认div宽度和高度
qq_41700374的博客
02-12 1万+
默认情况下任何元素标签都是有宽度css样式的。 一、认识div默认宽度 div默认的宽度多少？ 答案：默认宽度为100%，父级宽度多少它宽度就多少。 比如一个盒子宽度设置550px,里面一个div默认未设置宽度和未设置float，未设置padding等，在没有设置任何CSS属性情况下这个div宽度就是等于父级宽度550px。 比如一个html布局中，body默认宽度是100%...
JavaScript获取设置div的高度和宽度
09-23 2万+
JavaScript获取和设置div的高度和宽度，并且兼容任何浏览器？看代码：  复制代码代码如下:     获取div1的宽高度：  复制代码代码如下: alert(document.getElementById("div1").offsetHeight); //兼容FF、IE等  alert(document.getElementById(
div 左右排列 高度自适应_探讨div中的高度与宽度
weixin_39668479的博客
11-29 280
在学习css的过程中，总会遇到各式各样的超自然现象无法解释，当中有不少疑惑，决定用这篇文章来一探究竟。本文重点用常见例子的方式来探讨已知div的高度和宽度时的实际应用。Previously，请记住一点：写css请用border调试写css请用border调试写css请用border调试1.包裹文字时的div高度从上面是div的高度不是20px，说明跟font-size属性无关，只是由line-he...
html设置页面的宽度和高度,css怎么定义div的宽度和高度？
weixin_31518073的博客
06-05 7933
在css中，使用width和height属性便可以定义div的度度和高度。下面本篇文章就来给大家通过示例来具体介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。width 属性设置元素的宽度，height 属性设置元素的高度。这两个属性定义元素内容区的宽度和高度，在内容区外面可以增加内边距、边框和外边距；行内非替换元素会忽略这两个属性。示例：使用div标签创建一个模块，下面...
js改变div大小
qq_48102364的博客
08-23 1031
【代码】js改变div大小。
html div标签自动宽高,css可以设置div的宽度和高度吗？
weixin_35107169的博客
05-30 1117
css可以设置div的宽度和高度吗？答案是：可以。在CSS中可以使用width属性和height属性来设置div的宽度和高度。下面本篇文章就来给大家介绍一下width属性和height属性，希望对大家有所帮助。width属性设置元素的宽度；height属性设置元素的高度。这两个属性定义元素内容区的宽度和高度，在内容区外面可以增加内边距、边框和外边距。行内非替换元素会忽略width属性和height...
javascript 拖拽调整div大小
Mervyn的博客
07-29 832
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> div { height: 200px; position: absolute; top: 0px; } .right { right: 0
CSS控制div宽度最大宽度/高度和最小宽度/高度的方法
09-24
本文将深入探讨如何使用CSS来控制div元素的最大宽度和高度以及最小宽度和高度，特别关注在IE6中的兼容性问题。 首先，CSS提供`min-width`和`max-width`属性来限制元素的宽度。`min-width`确保元素的宽度不会小于...
contenteditable-autosize:根据用户输入调整宽度和高度
05-07
`contenteditable-autosize`的核心功能在于实时监测`contenteditable`元素中的文本变化，并根据内容的多少来自动调整元素的宽度和高度。这使得用户在编辑时不再受限于固定尺寸的输入框，提高了用户体验。在实际应用...
js获取div高度的代码
10-30
在给定的标题和描述中，提到的是使用JavaScript获取一个具有id为"top"的`<div>`元素的高度。`<div>`是HTML中的一个常用容器元素，用于组合其他HTML元素，我们可以对其应用样式，如背景色、字体大小、内边距等。 `...
JavaScript改变地图DIV大小
12-14
地图在Web页面上通常被嵌入到一个`<div>`中，通过JavaScript来控制其样式属性，如宽度和高度，从而改变地图的显示大小。 要实现JavaScript改变地图`<div>`大小，你需要以下步骤： 1. **创建地图Div**：在HTML中，...
将div的高度设置为全屏
04-07
标签中提到了"Javascript"，虽然在描述中没有直接使用JavaScript，但在实际应用中，我们可能需要使用JavaScript来动态调整div的高度，特别是当窗口大小改变或者有其他动态内容影响布局时。例如，我们可以监听窗口的...
html div标签自动宽高,div 宽高 css样式设置
weixin_42522575的博客
05-30 2052
对div配置宽高花样，即div宽度和高度同时配置一、宽高属性宽：width—— width:230px 配置宽值为230px高：height—— height:90px 设置css高值为90px二、div标签内直接运用高宽1、css实例代码此div宽度260px，高100px此div宽度160px，高度70px分袂对两个div设置高度和宽度值，为了看到设置装备摆设高 宽造诣，同时均设置装备摆设...
jQuery获取与设置div的宽和高
ztnhnr的专栏
01-01 5309
前端页面开发时，通过jquery有两种方法获取与设置div的宽高：使用尺寸函数或使用css方法。 一、获取宽和高 1.1 尺寸函数： width()获取宽度 height()获取高度 1.2 css方法： css("width")获取宽度 css("height")获取高度 区别： 尺寸函数返回的值为整型，而css获取的值为带px的字符串 举例： <!DOCTYPEhtml> <htmllang...
js改变div的宽度和高度
热门推荐
宋发元
08-18 3万+
js改变div的宽度和高度 #mydiv{ width: 200px; height: 200px; background-color: pink; } window.onload = function () { //拿到di
在html上js添加宽度,js 获取div高度并重新设置div高度与宽度
weixin_28703507的博客
06-15 1597
js 获取div高度并重新设置div高度与宽度js 获取div高度并重新设置div高度与宽度var $=function(id) {return document.getElementById(id);}function clickDiv(){$('testid').offsetWidth; // 20$('testid').offsetHeight; //200document.all.test...
jq 给div设置宽_jQuery 获取与设置div的宽高
weixin_39700220的博客
12-21 3167
jQuery获取与设置div的宽高的方法有两种：1. 使用尺寸函数2.使用css方法获取宽高1. 尺寸函数：height() 获取高度，width() 获取宽度2. css获取div宽高：css("height")获取高度，css("width")获取宽度区别：尺寸函数获取的值为整型，而css获取的值为带px的字符串$(".divClass").click(function() {// 使用wi...
LibreOffice的国内镜像安装地址和node.js国内快速下载网站
最新发布
小丁的博客
07-08 140
国内镜像包网址：https://mirrors.cloud.tencent.com/libreoffice/libreoffice/
根据页面大小调整显示的宽度和高度
06-07
如果你希望根据浏览器窗口大小自动调整 PDF 文件的显示宽度和高度，可以使用 JavaScript 来实现。下面是一个示例代码： ```html <div id="pdf-container"> <embed id="pdf-embed" src="example.pdf" type="application/pdf"> </div> <script> window.addEventListener("resize", function() { var container = document.getElementById("pdf-container"); var embed = document.getElementById("pdf-embed"); var width = container.clientWidth; var height = container.clientHeight; embed.width = width; embed.height = height; }); </script> ``` 上面的代码中，我们首先在一个 `<div>` 元素中嵌入了一个 PDF 文件，然后使用 JavaScript 监听浏览器窗口大小变化事件，根据 `<div>` 元素的宽度和高度来动态调整 PDF 文件的显示宽度和高度。在 JavaScript 中，我们首先获取了 `<div>` 元素和 `<embed>` 元素的引用，然后根据 `<div>` 元素的宽度和高度来设置 `<embed>` 元素的宽度和高度。 这样，当用户调整浏览器窗口大小时，PDF 文件的显示宽度和高度就会自动调整，从而适应不同的屏幕大小。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值