【前端词典】这些功能其实不需要 JS,CSS 就能搞定
前言
今天我们大家介绍一些你可能乍一眼以为一定需要 JavaScript 才能完成的功能,其实 CSS 就能完成,甚至更加简单。
内容已经发布在 gitHub 了,欢迎围观 Star,更多文章都在 gitHub。
直接入题
1. 每个单词的首字母大写
其实我第一次看到这个功能的时候就是使用 JS 去实现这个功能,想都没想 CSS 可以完成这个功能。马上就屁颠屁颠的写了一个方法:
function capitalizeFirst( str ) {
let result = '';
result = str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
return result
}
写完这个方法后,还有点小得意,也就没想其他方案。直到有一天看到 CSS 也能做这个功能的时候,我才反应过来明明一句 CSS 就能解决的问题,我却使用了更复杂的方案。
CSS 方案如下:
.capitalizeFirst-css {
text-transform: capitalize;
}
是不是特别简单(代码在上面的 blog 仓库,访问 cssDo 路由便可,下面的案例都是这个路由下):
text-transform 简单介绍
这是 CSS2 中的属性,参数有 capitalize | uppercase | lowercase | none
参数介绍:
- none: 默认。定义带有小写字母和大写字母的标准的文本。
- capitalize: 文本中的每个单词以大写字母开头。
- uppercase: 定义仅有大写字母。
- lowercase: 定义无大写字母,仅有小写字母。
从这个属性我们可以知道全部大写(小写)的需求这个属性也能轻易实现。
2. 单选高亮
可能你看到“单选高亮”没反应过来,直接来张图片你就马上清楚了:
不知道你是否第一次看到这种单选高亮的需求时,是怎么处理的。我第一次直接是用 JS 控制的。后来我发现这个需求用 CSS 更方便处理。
主要代码就是一段 CSS 代码:
.input:checked + .colors {
border-color: #e63838;
color: #e63838;
} <div class="single-check">
<input class="input" type="radio" name="colors" value="1">
<div class="colors">天空之境</div>
</div>
两个选择器的区别
~ 选择器
:查找某个元素后面的所有兄弟元素
+ 选择器
:查找某个元素后面紧邻的兄弟元素
扩展
其实这个技巧也完全可以使用在导航栏的交互效果,个人觉得可以简化一部分工作。
3、多列等高问题
之前做 pc 端的客户画像需求时,遇到需要左右两边等到的需求(左边块的高度会随着内容变化)。
最初我使用的 JS 计算高度再赋值,可是这样会有页面闪动的效果。所以找到了两种 CSS 的处理方案:
- 每列设置一个很大的 padding,再设置一个很大的负的 margin
- 使用
display: table;
第一种有明显的缺陷:
border-bottom
看不到了- 设置的下方的两个圆角也不见了
所以我使用了 display: table;
的方式来实现等高,可以说非常的方便。
建议不要一味的抵触 table,有的场景还是可以使用的。
4、表单验证
先声明:这里没有用到 JS,不过用到了 HTML5 关于
<input>
的新属性 —— pattern( 检查控件值的正则表达式 )。
还有一点:其实我在实际项目中没这么用过。
代码如下:
input[type="text"]:invalid ~ input[type="submit"] {
display: none
} <div class="form-css">
<input type="text" name="tel" placeholder="输入手机号码" pattern="^1[3456789]\d{9}$" required><br>
<input type="text" name="smscode" placeholder="输入验证码" pattern="\d{4}" required><br>
<input type="submit" ></input>
</div>
invalid 伪类和 vaild 伪类
- valid 伪类,匹配通过 pattern 验证的元素
- invalid 伪类,匹配未通过 pattern 验证的元素
大佬的同名公众号【小生方勤】。
原文转载地址:https://juejin.im/post/5d31338b6fb9a07eb74b7629
【前端词典】这些功能其实不需要 JS,CSS 就能搞定的更多相关文章
- 对百度WebUploader的二次封装,精简前端代码之图片预览上传(两句代码搞定上传)
前言 本篇文章上一篇: 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传) 此篇是在上面的基础上扩展出来专门上传图片的控件封装. 首先我们看看效果: 正文 使用方式同 ...
- vue+mock.js+element-ui模拟数据搞定分页
效果如图: 前提是搭好vue前端框架,npm install mockjs引入mock.js 当前页全部代码如下,其他有关element-ui的引入未提到,仅作参考用 <!-- 用户管理 --& ...
- 原生js之四步走搞定Ajax
说到Ajax,不得不先提一下HTTP(HTTP,HyperText Transfer Protocol)协议,中文名:超文本传输协议,是互联网上应用最为广泛的一种网络协议.所有的WWW文件 ...
- 大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app
大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app ( 本文内容为melodyWxy原作,git地址:https://github.com/melodyWx ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- 史上前端面试最全知识点(附答案)---html & js & css
史上前端面试最全知识点(附答案) 一.html & js & css 1.AMD和CMD是什么?它们的区别有哪些? AMD和CMD是二种模块定义规范.现在都使用模块化编程,AMD,异步 ...
- 【原创】分布式之数据库和缓存双写一致性方案解析(三) 前端面试送命题(二)-callback,promise,generator,async-await JS的进阶技巧 前端面试送命题(一)-JS三座大山 Nodejs的运行原理-科普篇 优化设计提高sql类数据库的性能 简单理解token机制
[原创]分布式之数据库和缓存双写一致性方案解析(三) 正文 博主本来觉得,<分布式之数据库和缓存双写一致性方案解析>,一文已经十分清晰.然而这一两天,有人在微信上私聊我,觉得应该要采用 ...
- jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!)
jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码 <table id="configEdatagrid&q ...
- 前端自动化之路之gulp,node.js
随着现在前端技术的不断发展,和各个公司对前端项目开发更新速度的要求,前端自动化越来越受到大家的重视,之前传统的前端开发方式已经越来越不能满足开发的需求了,于是各种自动化工具随之产生了.而gulp就是其 ...
随机推荐
- 设计模式详解及PHP实现:代理模式
[目录] 代理模式(Proxy pattern) 代理模式是一种结构型模式,它可以为其他对象提供一种代理以控制对这个对象的访问. 主要角色 抽象主题角色(Subject):它的作用是统一接口.此角色定 ...
- marquee上下无缝滚动
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name=&qu ...
- Intellij IDEA 干货分享
更多视频详情:https://www.bilibili.com/video/av89385013/ Intellij IDEA 真是越用越强大 它总是在我们写代码的时候 不时给我们来个小惊喜 出于对 ...
- JZOJ 5258. 友好数对 (Standard IO)
5258. 友好数对 (Standard IO) Time Limits: 1000 ms Memory Limits: 524288 KB Detailed Limits Description I ...
- Vue方式自动打开浏览器配置
Vue方式自动打开浏览器配置 1. 通过 package.json 配置项目 // 必须是符合规范的json语法 "vue": { "devServer": { ...
- String字符串位置移动
有规律的String字符串位置移动 1.自定义一个有规律的String字符串 String numstr = "1,2,3,x,y,4,5"; 2.按逗号拆分numstr字符串 S ...
- Layabox enabled 脚本禁用 坑
从unity入坑到Layabox,真的是一路踩坑啊,今天这个坑叫做 脚本禁用 enabled 问题一: 首先看官方文档 https://ldc2.layabox.com/doc/?nav=zh-ts- ...
- 025.掌握Service-SVC基础使用
一 Service简介 1.1 Service概念 Service是Kubernetes的核心概念,通过创建Service,可以为一组具有相同功能的容器应用提供一个统一的入口地址,并且将请求负载分发到 ...
- 【ERROR 1064 (42000)】MySQL中使用mysqladmin或set修改root密码时提示语法错误
报错信息: mysql> mysqladmin -uroot -p123456 password 654321; ERROR 1064 (42000): You have an error in ...
- 04-influxdb基本操作
influxdb基本操作 1. 数据库基本操作 # 创建数据库 > create database db01; # 查看数据库 > show databases; name: databa ...