javascript 模仿块级元素

最新推荐文章于 2022-03-22 18:29:27 发布
最新推荐文章于 2022-03-22 18:29:27 发布
阅读量230 收藏
点赞数
文章标签： js 函数声明调用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/benben0729/article/details/82888861
版权

在javascript中是没有块级元素的比如

for(var i=0;i<10<;i++)
{
    
}
alert(i);

在其他语言中，for循环之外是不能再访问i元素的，这就是块级元素决定的，而js中没有块级元素，仍然可以访问i元素

模仿块级元素

(function(){
    //块级元素部分
})()
用圆括号将匿名函数括起来表示这是一个表达式，而紧跟圆括号表示立即调用

 

 

benben0729
关注
专栏目录
JavaScript
qq_45240472的博客
03-27 1642
1、什么是JavaScript 1.1、概述 JavaScript是世界上最流行的脚本语言，因为你在电脑、手机、平板上浏览的所有的网页，以及无数基于HTML5的手机App，交互逻辑都是由JavaScript驱动的。 简单地说，JavaScript是一种运行在浏览器中的解释型的编程语言。 在Web世界里，只有JavaScript能跨平台、跨浏览器驱动网页，与用户交互。 Flash背后的ActionScript曾经流行过一阵子，不过随着移动应用的兴起，没有人用Flash开发手机App，所以它目前已经边缘化了。相
【狂神说笔记—— Java基础17-JavaScript，jQuery】
weixin_46055348的博客
07-27 536
【狂神说笔记—— Java基础17-JavaScript，jQuery】
js块级元素
qq_43516282的博客
05-01 692
块级元素要记得设置宽和高
HTML中块级元素和行内元素的总结（下）
qq_45146082的博客
12-05 198
HTML标签 CSS盒模型 块级元素和行内元素的定义 块级元素和行内元素的分类 块级元素和行内元素的分类 html中的块级元素： 标签 描述 h3>html中的行内元素： ...
H5+CSS+JS:块元素
mjhap的博客
08-29 603
块元素 H5块元素 块元素在显示时，通常会以新行开始 如：&lt; h1 &gt;、&lt; p &gt;、&lt; ul &gt; 内联元素 内联元素通常不会以新行开始 如：&lt; b &gt;、&lt; a &gt;、&lt; img &gt; &lt; div &gt;元素 &lt; div &gt;元素也被称为块元素，其主要是组合HTML元素的容器
关于块级元素，行级元素和javascript的一些总结
wyz1978154331的专栏
07-27 542
今天在学习HTML时，学长给我们强调了块级元素标签每出现一次都会自动占一行，不用自己换行。行级元素是如果不换行的话，就会在该行后面追加。而且在属性上与行级元素的区别是行级元素是除了malign外就没有了，而块级元素想cellspacing这类的都可以调整。 今天在学习JavaScript方面，向radio和checkbox的name属性必须相同才好在后面从表单里面取值时通过document.ge
js改变块级元素位置工具类
wuxiao18的博客
07-28 293
这是上一篇的js部分，只是单独总结出来一个工具类，以后用了方便罢了 https://blog.csdn.net/wuxiao18/article/details/97616476 /* * 目前定时器的标识在全局中保存 * 所有的执行正在执行的定时器都在这保存 * *///var timer; //更改为了obj.timer //创建可以实现简单动画...
JavaScript模仿当当网首页剥离的36类商品分类JS菜单demo
05-19
本示例中的“JavaScript模仿当当网首页剥离的36类商品分类JS菜单demo”旨在帮助开发者理解如何用JavaScript实现一个功能完备、用户体验良好的商品分类导航系统。 首先，这个项目的核心在于利用JavaScript的DOM操作...
JAVASCRIPT DIV 弹层(模仿EXTJS)
08-05
在HTML中，Div是一个块级元素，可以用来组织页面布局。通过CSS，我们可以控制Div的样式，包括位置、大小、颜色、边框等。在JavaScript中，我们可以动态操作Div，如创建、显示、隐藏、移动或改变其内容。 创建一个...
web前端 html+css+js+jquery 文化嘉定官网模仿
06-27
同时，HTML还支持内联元素（如`<a>`、`<span>`）和块级元素（如`<div>`、`<p>`），以及表单元素（如`<form>`、`<input>`、`<button>`）等，用于实现交互功能。 2. CSS（Cascading Style Sheets）： CSS是用于表现...
行内元素有哪些？块级元素有哪些？空元素有哪些？
JsRoccketq的博客
09-23 3555
块级元素(block)的特性： 总是独占一行,表现为另起一行开始，而且其后面的元素必须另起一行显示，宽度（width）、高度（height）、内边距（padding）、外边距（margin）都是可以自行控制的。 行内元素（inline）或内联元素特性：相邻的内联元素是在一行的 宽度（width）、高度（height）、内边距（padding）、外边距（margin）都是不能自行控制的。只有...
块级元素和行内元素的区别
小草莓的博客
03-20 1171
给行内元素设置宽高不会起作用，margin 值只对左右起作用，padding 值也只对左右起作用；宽度继承自父级，是父级元素的100%；都是可替代元素，这些元素即使是空的，浏览器也会根据其标签和属性来决定显示的内容。行内元素不会独占一行，只会占领自身宽高所需要的空间（宽高由内容决定）；行内元素一般不可以包含块级元素，只能包含行内元素和文本；可以给块级元素设置宽高、内边距、外边距等盒模型属性；可替代元素具有内在的尺寸，所以宽高可以设定。块级元素可以包含块级元素和行内元素；3、可替代元素（行内元素兼块级元素）
js判断鼠标是否在某一块级元素内部
xiecheng1995的博客
07-02 5122
在某一实际项目中需要拖拽功能，并实现拖拽到某一元素内，执行响应的操作。这里给出一个鼠标是否在元素内的判别函数。其中obj为拖拽进的元素（而非拖拽的元素）。 // 判断鼠标是否落在一个块级元素内部 checkIn(obj) { var x = Number(window.event.clientX) // 鼠标相对屏幕横坐标 var y = Number(window.event.clientY) // 鼠标相对屏幕纵坐标 var div_x = Number(obj.getBoun
顶级、块级、内联,html元素的三大分类
Hyvi的专栏
04-23 288
长见识了：       学习html后, 你会了解一些基本的html元素(Element), 如p, h1~h6, br, div, li, ul, img等. 如果将这些元素细分, 又可以分别归为顶级 (top-level)元素,块级 (block-level)元素和内联 (inline)元素.    1.  Top-level element  【顶级...
块级元素和行内元素以及display:block
冬木彩雨
12-09 2161
根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。 块级元素： 动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整
【每日十分钟前端】基础篇13，input里的name、块级元素和行内元素和空（void）元素、JS原型与原型链
u013035708的博客
03-22 1017
1、在 input 里，name 有什么作用？ 2、块级元素和行内元素有什么区别？空（void）元素有那些？ 3、JS 原型是什么？如何理解原型链？
HTML行级元素和块级元素区别
小北
04-17 3241
HTML块级元素与行级元素   转自：http://gkecenter.blog.163.com/blog/static/181380305201291745234195/   一.两种类型 HTML中的大部分元素都可分为两种类型：块级元素和行级元素。这些元素的类型是通过文档类型定义（DTD）来指明。块级元素会从新的一行出现，行 级元素则不会。块级元素的前后都
行内元素 块级元素 行内块级元素
SHAWN2016的博客
08-23 708
块级元素 标签 内容 address 定义地址 caption 定义表格标题 dd 定义列表中定义条目 div 定义文档中的分区或节 dl 定义列表 dt 定义列表中的项目 fieldset 定义一个框架集 form 创建 HTML 表单 h1 定义最大的标题 h2...
js如何让一个元素触发click点击事件
热门推荐
6块腹肌的博客
06-13 8万+
很简单，就一行代码。如下： <div id="div"></div> let div = document.getElementById("div"); div.click(); 重点是：click()，调用该方法时，相应的DOM元素就会执行点击事件。 ...
vue块级元素拖拽功能
最新发布
07-13
Vue.js提供了一种简单的方法来实现块级元素的拖拽功能。你可以使用`v-draggable`指令来实现这个功能。 首先，确保你已经引入了Vue.js库。然后，你可以按照以下步骤来实现拖拽功能： 1. 在Vue实例中定义一个data属性，用于存储拖拽元素的位置信息。例如： ```javascript data() { return { posX: 0, posY: 0 }; } ``` 2. 在需要拖拽的元素上添加`v-draggable`指令，并绑定位置信息。例如： ```html <div v-draggable="{x: posX, y: posY}"> <!-- 拖拽的内容 --> </div> ``` 3. 创建一个自定义指令`v-draggable`，在该指令中实现拖拽功能。例如： ```javascript Vue.directive('draggable', { bind(el, binding) { let startX = 0, startY = 0; let initialX = binding.value.x, initialY = binding.value.y; function onMouseDown(event) { startX = event.clientX; startY = event.clientY; document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); } function onMouseMove(event) { const deltaX = event.clientX - startX; const deltaY = event.clientY - startY; el.style.transform = `translate(${initialX + deltaX}px, ${initialY + deltaY}px)`; } function onMouseUp() { document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); // 更新位置信息 binding.value.x += event.clientX - startX; binding.value.y += event.clientY - startY; } el.addEventListener('mousedown', onMouseDown); } }); ``` 现在，你就可以在Vue组件中使用`v-draggable`指令来实现块级元素的拖拽功能了。当你拖拽元素时，它会根据鼠标移动的距离来更新位置信息，并且在释放鼠标时保存新的位置信息。 希望这个例子能帮助到你！如有任何疑问，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值