改变盒子大小（HTML+js+css）

最新推荐文章于 2022-08-11 11:51:12 发布
最新推荐文章于 2022-08-11 11:51:12 发布
阅读量7.6k 收藏 25
点赞数 6
文章标签： css js html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vi_to/article/details/108364771
版权

这几天准备开学，没有时间学习新的知识，所以就发点以前写的代码；比较简单的DOM代码
效果如下：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{width: 50px; height: 50px; background: #CCCCCC;margin: 0 auto;}
		</style>
	</head>
	<body>
		<div id="box" class="box">
			
		</div>
	</body>
	<script type="text/javascript">
		var box=document.getElementById('box');
		var i=0;
		box.onclick=function(){
			++i;
			if(i%2){
				this.style.width='200px';
				this.style.height='200px';
				this.innerHTML='大';
			}else{
				this.style.width='50px';
				this.style.height='50px';
				this.innerHTML='小';
			}
		};
	</script>
</html>
vi_to
关注
  • 6
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
盒子模型的大小改变
m0_62800060的博客
12-06 1244
盒子模型（★★★） CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变 可以分成两种情况： box-sizing: content-box 盒子大小为 width + padding + border （以前默认的） box-sizing: border-box 盒子大小为 width 如果盒子模型我们改为了box-sizing: border-box ， 那padding和border
可调整大小的盒子
02-14
可调整大小的盒子
js简单入门，利用css和js简单实现动态修改盒子大小
迪丽热bug的博客
08-06 5259
今天做的是一个使用js动态调整盒子的大小 下面是简单的基本页面 点击修改后的菜单栏 鼠标划入后修改样式 点击确认后 确认样式， 菜单栏收回 点击取消后 样式还原到默认样式 菜单栏收回 废话不多说开始上代码， 下面是html的代码 //大盒子 <div class="box" id="boxdiv"> ...
js拉动边框改变盒子大小
stone10086的博客
05-07 4959
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ padding: 0; margin: 0;
js实现点击盒子后修改颜色和宽度
黄大仙
08-04 3314
<style> div { width: 200px; height: 200px; background-color: pink; } </style> <div></div> <script> var div = document.querySelector('div'); div.onclick = functio
盘点三个JavaScript案例——实现限时秒杀、定时跳转、改变盒子大小
IT技术分享社区
05-06 4879
前言今天来给大家盘点三个JavaScript案例，分别是实现限时秒杀、定时跳转、改变盒子大小案例，一起来看看吧！一、实现限时秒杀案例1.在淘宝网中，商家为了促销经常搞一些活动，例如限时秒杀...
HTML+CSS+JAVAscript手册
10-14
5. **CSS盒模型**：盒模型是理解CSS布局的关键，每个HTML元素都是一个矩形盒子，包括内容区域、内边距、边框和外边距。CSS3中的盒模型有两种：标准盒模型（content-box）和IE盒模型（border-box）。 6. **CSS布局**...
基于html+css+js的海贼王.rar
04-22
"基于html+css+js的海贼王.rar" 这个标题表明这是一个关于网页开发的项目，具体来说是利用HTML（超文本标记语言）、CSS（层叠样式表）和JavaScript这三种核心技术来创建的一个以“海贼王”为主题的网页。HTML负责...
HTML+CSS京东商城实战
04-23
在这个项目中，你将学习如何使用CSS选择器来选中特定的HTML元素，并为其设置颜色、字体、大小、位置等样式属性。例如，你可以通过类选择器如`.navbar`来改变导航栏的背景色和文字颜色，使用`float`或`display`属性...
html css js网页设计
最新发布
05-14
HTML、CSS和JavaScript是网页设计的三大核心技术，它们共同构建了互联网上丰富多彩的用户体验。HTML（HyperText Markup Language）负责创建网页结构，CSS（Cascading Style Sheets）用于定义页面的样式和布局，而...
vue实现div可拖动位置也可改变盒子大小的原理
10-14
主要介绍了vue实现div可拖动位置也可改变盒子大小，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
css+js教程
09-05
在"css+js教程"中，你可能将学习以下知识点： 1. CSS基础：了解选择器、盒模型、浮动、定位、响应式设计等基础知识。 2. CSS3新特性：学习使用媒体查询、Flexbox弹性盒子布局、Grid格栅布局、阴影、渐变、过渡、...
js第7章DOM案例：改变盒子大小、列表的增删和移动、购物车
WHT869706733的博客
12-05 4896
1.改变盒子大小 <style> .box{width:50px;height:50px;background:#eee;margin:0 auto;} </style> <body> <div id="box" class="box"></div> <script> var box = document.getElementById('box'); var i = 0;
html点击按钮状态改变,点击按钮改变CSS样式
weixin_34622572的博客
05-30 2244
点击按钮改变CSS样式* {padding:0px;margin:0px;}.box {width:300px;height:300px;border:1px solid #CBC4F7;font-size:13px;margin:100px auto;}.divWidth {width:400px;}.divHeight {height:400px;}.divBgColor {backgroun...
html5调盒子边框大小,CSS3 - 盒子大小(CSS3 - Box Sizing)
weixin_39638012的博客
06-07 1245
CSS3 - 盒子大小(CSS3 - Box Sizing)Box大小调整属性用于更改元素的高度和宽度。从css2开始，box属性的工作方式如下所示 -width + padding + border =元素框的实际可见/渲染宽度height + padding + border =元素框的实际可见/渲染高度意味着当你设置高度和宽度时，它会显得稍微大些，然后给定大小导致元素边界和填充添加到元素的...
css+html实现div盒子跟随页面缩放
smile2bug的博客
01-04 7114
233欢迎使用Markdown编辑器新的改变1功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编
【HTML5+CSS3】盒子的大小
qq_62092119的博客
08-11 1705
box-sizing是用来设置盒子尺寸的计算方式（属性有1.border-box ，此时box1为100*100，宽高用于设置整个盒子可见框的大小。2.content-box 此时box1为140*140，宽高用于设置内容区大小
css 百分比 怎么固定正方形_CSS题目系列（2） - 实现一个固定比例盒子
weixin_39789525的博客
11-20 421
描述在开发过程中，会有这么一个情况，需要将一个盒子的尺寸定义为固定比例，且尺寸需根据视图的尺寸来进行缩放，也就是响应式，常见的多如有矩形、圆形等。下面我将使用下面的例子为大家进行讲解：正文其实实现这个效果，有多种方法，下面逐一介绍。1、垂直方向的padding相信大家对padding都不陌生，但你知道他是如何取值的吗？看一下MDN中对padding给出的解释： 取值 指定一个，两个，三个或四个下列...
四宫格效果 css_CSS 盒模型
weixin_40003478的博客
12-01 667
css的盒模型由content(内容)、padding(内边距)、border(边框)、margin(外边距)组成。但盒子的大小由content+padding+border这几部分决定，把margin算进去的那是盒子占据的位置，而不是盒子的大小！通过代码来对其进行理解，更直观。示例一：.示例一CSS盒模型示意图示例一效果图片盒子大小就是content的大小200px*200px。示例二：.示例二...
js实现改变盒子大小有缓冲
06-09
要实现盒子大小有缓冲的效果，可以使用JavaScript的`setInterval`函数和缓动算法。 以下是一个简单的实现示例： HTML: ```html <div id="box"></div> <button onclick="changeBoxSize()">改变盒子大小</button> ``` CSS: ```css #box { width: 100px; height: 100px; background-color: red; transition: all 0.5s ease-out; } ``` JavaScript: ```javascript function changeBoxSize() { var box = document.getElementById("box"); var targetWidth = Math.floor(Math.random() * 300) + 50; var targetHeight = Math.floor(Math.random() * 300) + 50; var interval = setInterval(function() { var currentWidth = box.offsetWidth; var currentHeight = box.offsetHeight; var distanceWidth = targetWidth - currentWidth; var distanceHeight = targetHeight - currentHeight; var speedWidth = distanceWidth / 10; var speedHeight = distanceHeight / 10; if (Math.abs(distanceWidth) < 1 && Math.abs(distanceHeight) < 1) { clearInterval(interval); } else { box.style.width = currentWidth + speedWidth + "px"; box.style.height = currentHeight + speedHeight + "px"; } }, 20); } ``` 在这个示例中，当点击按钮时，`changeBoxSize`函数会被调用。这个函数会使用`setInterval`函数来逐步改变盒子的大小，直到达到目标大小。在每个时间间隔中，我们会计算当前大小和目标大小之间的距离，并根据距离计算出盒子每次缩放的速度，然后用这个速度逐步改变盒子的大小。这个过程会在`setInterval`函数中一直进行，直到盒子的大小达到目标大小，然后我们会使用`clearInterval`函数停止这个过程。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值