概要 最近项目中有遇到一种场景需要元素以固定宽高比且元素的宽度占父元素的固定百分比的情况,简而言之就是元素的宽度是随浏览器而变化,元素的高度是随元素的宽度变化的。 实现方式一:使用aspect-ratio...
网页字体 font-family 属性详解
问题描述 当我们拿到设计稿去实现一个网页时,经常会发现设计稿当中一般使用的字体都是 PingFang SC 这一款字体。这是因为我们的 UI 设计师 一般使用的都是 Mac 电脑制作的设计稿。但是我们并不能...
关于javascript的事件委托delegate
什么是事件委托 事件(例如onclick,onmouseover,onmouseout等事件),这些事件本来是加在发生这些事件的元素上,委托就是加在他的父亲或者爷爷身上。来完成这个事件。 啥时候会使用delegate呢?页面中原来...
分享 7 个不常用但有用的 CSS 小技巧
在这篇文章中,我想向您展示一些简单的CSS技巧,您可以在下一个项目中使用它们。让我们开始吧! 1、-webkit-text-stroke 通过使用这个简单易用的属性,可以创建出酷炫的文字效果。它可以给文字添加描边。-...
15个帮助你写出更简洁JavaScript的技巧
在本文中,我们将分享一些可以帮助你编写干净的 JavaScript 代码的技巧。无论你是初级职位还是高级职位,它都一定会帮助你提高实践水平。 01、使用对象解构来获得更清晰的代码 // Bad const firstName = u...
常用正则表达式
一、校验数字的表达式 1. 数字:^[0-9]*$ 2. n位的数字:^\d{n}$ 3. 至少n位的数字:^\d{n,}$ 4. m-n位的数字:^\d{m,n}$ 5. 零和非零开头的数字:^(0|[1-9][0-9]*)$ 6. 非零开头的最多带两位...
Js常用正则表达式总结
1、限制输入数字、字母、短横线 <input onkeyup="this.value=this.value.replace(/[^\w\-]/g,'')" onpaste="this.value=this.value.replace(/[^\w\-]/g,'')" /> ...
18 个强大的前端开发技巧
浏览器 01、实现全屏 当你需要将当前屏幕显示为全屏时,以下代码对你有用。 function fullScreen() { const el = document.documentElement const rfs = el.requestFullScreen || ...
11个杀手级的实用JavaScript单行代码
JavaScript是一门简单而复杂的语言,简单是因为他有很多框架库可以使用,复杂也是因为它有太多的框架库可以选择。 很多时候,我们不知道如何使用,但是,在实际开发中,我们经常用的东西真的不多,在前端领域...
分享30个你必须知道的JS基础知识
今天这篇文章整理了30个你必须知道的关于JavaScript的常识点,无论你是面试还是日常开发,都会给你很大的帮助。 1. ‘&&’运算符能做什么? && 运算符,也称为逻辑与,计算操作数并返回它遇...
