前端 - 随笔分类 - anjun_xf

Chrome浏览器控制台有用的命令

摘要：Chrome调试某元素上到底绑定了哪些事件，控制台输入命令：获取元素所有事件信息（等价于控制台的Event Listeners标签） getEventListeners(document.querySelector(".common_block > button")) 监控：获得元素触发的所有事阅读全文

posted @ 2024-08-26 11:16 anjun_xf 阅读(166) 评论(0) 推荐(0)

js 实现alert提示功能

摘要：js 简单弹框toast JS 实现一个可拖动的DIV 阅读全文

posted @ 2024-08-22 10:44 anjun_xf 阅读(15) 评论(0) 推荐(0)

web前端学习路线图

摘要：web前端学习路线图应该包括以下几个阶段：第一阶段：基础入门阶段 HTML5+CSS3 基础结构布局，PC端和移动端。 JavaScript 基础内容，如数据类型、函数、数组等。 JavaScript 高级内容，如对象、原型链、闭包等。 JavaScript ES6 进阶，包括箭头函数、模块化等。阅读全文

posted @ 2024-07-27 10:58 anjun_xf 阅读(170) 评论(0) 推荐(0)

js调整div顺序

摘要：js调整div顺序并保留div原有事件等 <div class="my_tabs"> <div class="el-tabs__nav-scroll"> <div class="el-tabs__nav"> <div class="el-tabs__item is-active">AAAA</div 阅读全文

posted @ 2024-04-27 13:44 anjun_xf 阅读(123) 评论(0) 推荐(0)

通过前端事件对象获得控件所在页面html

摘要：//输入框获取焦点事件 function handleInputFocus() { console.log('handleInputFocus 2', event); let pgHtml = $(event.target).prop('ownerDocument').body.innerHTML; 阅读全文

posted @ 2024-04-17 16:12 anjun_xf 阅读(31) 评论(0) 推荐(0)

CSS知识点整理

摘要：CSS 函数参考手册 CSS 选择器参考手册 CSS 调整大小 div { border: 2px solid; padding: 20px; width: 300px; overflow: auto; } </style> </head> <body> <h1>resize 属性</h1> <di 阅读全文

posted @ 2024-04-05 10:57 anjun_xf 阅读(39) 评论(0) 推荐(0)

网页读取本地文件

摘要：来自【文心一言】 FileReader 是 Web API 的一部分，它提供了一种异步方式来读取存储在用户计算机上的文件。 <html> <input type="file" id="fileInput" /> <button onclick="readFile()">读取文件</button> < 阅读全文

posted @ 2024-02-05 14:38 anjun_xf 阅读(320) 评论(0) 推荐(0)

ts字符串与base64互转

摘要：字符串转base64 和 base64转字符串 /** * 字符串转base64（不推荐） * @param str * @returns */ public static myEncode(str) { // 对字符串进行编码 var encode = encodeURI(str.replace( 阅读全文

posted @ 2023-09-26 14:30 anjun_xf 阅读(917) 评论(0) 推荐(0)

less

摘要：less，浏览器不识别。需要编译成css。 @import "comm.less";//引入less文件（模块化引入多个less） .box1{ border:1px solid red; .box2{//嵌套 font-size:12px; width:100px + 100px; height: 阅读全文

posted @ 2023-02-07 19:47 anjun_xf 阅读(41) 评论(0) 推荐(0)

CSS选择器

摘要：CSS 选择器参考手册：CSS 元素选择器容易混淆后代选择器 <style type="text/css"> h1 em {color:red;} </style> <h1>This is a <em>本处变红</em> heading</h1> 子元素选择器 <style type="tex 阅读全文

posted @ 2022-08-20 11:25 anjun_xf 阅读(30) 评论(0) 推荐(0)

元素设置背景图片

摘要：背景图片 background属性 background-color 背景颜色 background-image: url('i3.png') 图片 background-size 图片大小 background-repeat 平铺方式 background-position 图片位置例子 /*图阅读全文

posted @ 2022-08-15 15:07 anjun_xf 阅读(41) 评论(0) 推荐(0)

博客园代码实现折叠

摘要：如下在markdown中实现标题部分 ```css background-image: url(images/logo.png); ``` 阅读全文

posted @ 2022-04-21 11:32 anjun_xf 阅读(82) 评论(0) 推荐(0)

网站第一个css，初始化页面样式

摘要：/* 把我们所有标签的内外边距清零 */ * { margin: 0; padding: 0; /* css3盒子模型 */ box-sizing: border-box; } /* em 和 i 斜体的文字不倾斜 */ em, i { font-style: normal } /* 去掉li 的小阅读全文

posted @ 2021-06-04 17:28 anjun_xf 阅读(79) 评论(0) 推荐(0)

怎么让html表单元素自动充满浏览器窗口，并且自适应浏览器窗口变化？

摘要：技术：vue + typescript 思路：将==“ body的高度 - 死值 ”==得到高度，按需要分给目标元素即可。例子： h1 = '400px';//textarea 1初始高度 h2= '400px';//textarea 2初始高度 beforeMount() { this.h1 = 阅读全文

posted @ 2021-05-14 10:41 anjun_xf 阅读(791) 评论(0) 推荐(0)

前端入门教程：HTML5+CSS3+移动端布局-flex布局rem布局响应式布局

摘要：黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局课堂代码下载名词“元素、标签、属性” HTML标签如html或a等。标签对大小写不敏感。 HTML元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。如<p>T 阅读全文

posted @ 2021-03-07 19:39 anjun_xf 阅读(710) 评论(0) 推荐(0)

随笔分类 - 前端