原生HTML
柑橘乌云_
希望我的博客,能帮你解决学习或工作中所遇到的问题
展开
-
div模拟textarea文本域轻松实现高度自适应
看效果可以看到div在获取焦点的时候,会有个黑色边框,如果想要去掉需要设置outline属性为none。需要注意这个div可以识别富文本需要注意安全问题,最好可以做html标签的过滤。这里提供一个平替方法 就是div+contenteditable属性。记录了四种实现textarea自适应的方法,希望可以帮助到敏娜。众所周知文本域不能做到随着内容自适应高度的。原创 2024-04-22 16:27:12 · 206 阅读 · 0 评论 -
常用HTML全局属性学习记录
HTML全局属性详解accesskey、autocapitalize、contenteditable、data-*、draggable、tabindex、dir原创 2024-04-22 11:42:04 · 1107 阅读 · 0 评论 -
draggable 属性------拖拽学习记录
【代码】draggable 属性------拖拽学习记录。原创 2024-04-22 11:17:13 · 330 阅读 · 0 评论 -
html5自定义属性--------Dataset
div class="mm" data-name="无版权">.mm[data-name='无版权']{background:url(mm1.jpg) no-repeat;DOMStringMap对象。原创 2024-04-22 10:57:48 · 466 阅读 · 0 评论 -
你不知道的 CSS 之 包含块 ! 最细讲解,一听就懂!
没错,因为我们对 div1 进行了定位,因此它会应用非根元素包含块计算规则的第三条规则,寻找离它最近的 position 的值不是 static 的祖先元素,不过显然 body 的定位方式为 static,因此 div1 的包含块最终就变成了初始包含块。首先 HTML 作为根元素,对应的包含块就是前面我们所说的初始包含块,而对于 body 而言,这是一个 static 定位的元素,因此该元素的包含块参照第一条为 html,以此类推 div1、p1、p2 以及 em1 的包含块也都是它们的父元素。原创 2024-01-03 16:11:35 · 1158 阅读 · 0 评论 -
通过IntersectionObserver实现图片下拉加载(瀑布流布局)
【代码】通过IntersectionObserver实现图片下拉加载(瀑布流布局)原创 2023-12-26 16:06:22 · 461 阅读 · 0 评论 -
纯js实现瀑布流布局
纯js实现瀑布流布局原创 2023-12-26 14:59:48 · 448 阅读 · 0 评论 -
Intersection Observer 实现图片懒加载
假如HTML格式如上图所示,src值是默认图片,真正图片格式放在data-src里。下面的js,非常简单。原创 2023-12-26 14:14:03 · 466 阅读 · 0 评论 -
前端跨页面交互信息或传递信息都有这么几种方式,总有一个满足你的使用场景
父A = 非同源应用A (e.g. http://localhost:63342/demo/iframe/page1.html)父B = 非同源应用B (e.g. http://192.168.2.112:3000/)子B = 非同源iframe桥 (e.g. http://localhost:8081/)子A = 非同源iframe桥(e.g. http://localhost:8081/)2. iframe接收后发起同源广播,同源广播可以在另一个应用中监听。iframe 【代理】原创 2023-12-23 13:55:47 · 530 阅读 · 0 评论 -
如何实现酷狗音乐pc页面点击播放时,打开多个歌曲播放时,始终在一个播放页面,(标签页的通讯)
第一种是利用同源所以localStorage是共享的这个原理去做,第一打开播放页时候就本地存个值(比如设置已打开标签页的数量),播放页关闭的时候去掉这个值。第二种是 b页面也是可以给a页面发送消息,当b页面被打开时候,往a页面去发送消息,表示标签页被打开,然后a页面去管理这个状态,从而识别标签页是否被打开。这种方式有个弊端,就是每次点击播放页,总是会刷新播放页,并不是很好,而酷狗播放页并不是刷新而是跳转过来直接就是播放。这种方式有两个前提条件,一个是必须同源,一个是必须通道名相同。原创 2023-12-23 13:41:10 · 669 阅读 · 0 评论 -
极少css代码+vue计算属性,实现swiper轮播图效果
项目里用到的vue.js是下载的vue2js文件。原创 2023-12-20 17:15:16 · 487 阅读 · 0 评论 -
edge/chrome浏览器favicon.ico缓存问题
第一次设置了faccion.ico 后 再一次修改会发现修改不成功,图片还是上一次修改后的,这是因为浏览器的缓存导致。在href图片路径后加上参数例如:href="favicon.ico?原创 2023-11-14 13:50:50 · 1383 阅读 · 0 评论 -
HTML5中的data-*属性
data-*全局属性是一类被称为自定义数据属性的属性,它赋予我们在所有 HTML 元素上。原创 2023-07-31 10:22:33 · 1302 阅读 · 0 评论 -
image的mode参数以及详细介绍
image的mode参数有以下几个:原创 2023-06-01 22:43:50 · 2082 阅读 · 0 评论 -
vue 类与样式绑定 动态class 动态样式style
将它们和动态的字符串绑定。但是,在处理比较复杂的绑定时,通过拼接生成字符串是麻烦且易出错的。因此,Vue 专门为。数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。都是 attribute,我们可以和其他 attribute 一样使用。用法提供了特殊的功能增强。除了字符串外,表达式的值也可以是对象或数组。不管是类class还是样式style,都有对象和数组的写法。原创 2023-05-06 10:11:28 · 250 阅读 · 0 评论 -
原生table标签 设置一个属性 实现单元格内容可编辑
vue中 table配置了 contentEditable="true" 通过@blur事件对象来获取用户编辑后的值原创 2023-04-21 09:40:03 · 233 阅读 · 0 评论 -
原生table 边框重叠 粗细不一样等问题,秒懂,只需几秒就能完成
下面的方法前提需要查看是否存在默认样式表设置了边框为border:none的情况,若有,则注释掉 ,默认样式表如果将table、tr、td设置了border:none 可能会导致下面方法失效。下面的方式只需要设置table的一些属性就可以达到目的,不需要用css给每个tr和td设置边框。一、边框粗细相同 (粗边框)二、边框粗细相同 (细边框)原创 2023-04-19 20:14:14 · 1416 阅读 · 0 评论