前端项目遇到的问题（一）
原创前端项目遇到的问题（一）
原创
闲言
时隔2年重新写写文章，23年6月在公司躲过了2次人员优化的我，在第三次主动领取大礼包。在家gap三个月（跑过滴滴、接过兼职），到新公司一系列经历感到身心极其emo，整个人都很抑郁（从公司离职到新环境的适应、公司福利待遇落差、家庭琐事等等）在这里想要感谢我现在的leader，给我的一些建议和帮助，让我慢慢走出那段差劲的状态。
- 给大家一些对我有帮助的方法：
- 上下班路上听书看书
- 制定可以接受的运动计划（10个俯卧撑、500个跳绳等等）
- 坚持写文章
说来惭愧之前都没怎么看书
好啦废话不多说，下面记录一些开发app中webview的H5页面遇到的一些问题，今天给大家带来的是文字下划线的四种实现方法
一、文字下划线
1. css自带属性
- 通过css属性text-decoration自带下划线
- text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等。
缺点：无法自定义下划线样式
.demo {
/*关键值*/
text-decoration: none; /*没有文本装饰*/
text-decoration: underline red; /*红色下划线*/
text-decoration: underline wavy red; /*红色波浪形下划线*/
/*全局值*/
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;
}
.textDecoration {
width: 150px;
text-decoration: underline;
text-decoration-line: underline;
text-decoration-color: #ffe3d6; /* 红色 */
text-decoration-style: dashed; /* 虚线 */
}2. border
- CSS border 属性用于指定元素边框的样式、宽度和颜色。
缺点：不能跟随文本换行
.textBorder {
width: 150px;
border-bottom: 1px solid #ffe3d6;
}3. 伪类
- 通过给dom添加 before/after 添加下划线
缺点：效果同border一样不能跟随文本换行
.textAfter {
position: relative;
width: 150px;
}
.textAfter::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background: #ffe3d6;
}4. 背景（项目中使用）
- 通过使用 background: linear-gradient 可以解决文本换行跟随，自定义下划线高度问题
.textBody {
width: 150px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
word-break: break-all;
}
.text {
background: linear-gradient(180deg, rgba(255, 227, 214, 0) 66.6%, #ffe3d6 66.6%);
}实际效果
二、获取元素宽高getComputedStyle、getBoundingClientRect、getClientRects
在 JavaScript 中，getComputedStyle、getBoundingClientRect 和 getClientRects 是用于获取元素宽高及位置信息的方法，以下是对它们的介绍：
1.getComputedStyle()：
- 这个方法可以获取指定元素的最终计算后的 CSS 样式。
- 可以通过该方法获取元素的宽度和高度属性，如
width和height。 - 适用场景： 当需要获取元素的具体 CSS 样式属性值时很有用，不仅限于宽高，还可以获取颜色、字体大小等各种样式属性。
- 示例：
const element = document.getElementById('myElement');
const styles = window.getComputedStyle(element);
const width = styles.width;
const height = styles.height;- 返回的宽度和高度通常包含单位，如
100px，需要进一步处理（如parseInt()）才能得到纯数字的宽高值。
2.getBoundingClientRect()：
- 返回一个 DOMRect 对象，包含元素的位置和大小信息。
- 可以直接获取元素的宽度和高度，以及相对于视口的位置信息。
- 适用场景： 常用于获取元素相对于视口的位置和大小，在需要进行元素的定位、碰撞检测等场景下非常方便。
- 示例：
const element = document.getElementById('myElement');
const rect = element.getBoundingClientRect();
const width = rect.width;
const height = rect.height;- 返回的宽度和高度是数值类型，不需要额外处理单位。
3.getClientRects()：
- 返回一个
ClientRect对象的集合，代表元素的每个边框矩形。 - 如果元素有多个边框矩形（例如多行文本的元素），则会返回多个
ClientRect对象。 - 通常用于获取元素的多个部分的位置和大小信息。
- 适用场景： - 当需要获取元素内部多个部分的位置和大小信息时比较有用，例如处理多行文本的布局或者有多个内联元素组成的复杂布局。
- 示例：
const element = document.getElementById('myElement');
const rects = element.getClientRects();
for (const rect of rects) {
const width = rect.width;
const height = rect.height;
}- 每个
ClientRect对象的宽度和高度也是数值类型。
这些方法在不同的场景下有不同的用途。getComputedStyle 更适用于获取 CSS 样式属性，getBoundingClientRect 通常用于获取元素相对于视口的位置和大小，而 getClientRects 可以用于处理具有多个边框矩形的元素。
除了 getComputedStyle()和 getBoundingClientRect()方法，还有哪些方法可以获取元素的宽高？
以下是一些获取元素宽高的其他方法：
一、使用 offsetWidth 和 offsetHeight 属性
const element = document.getElementById('myElement');
const width = element.offsetWidth;
const height = element.offsetHeight;offsetWidth 和 offsetHeight 返回元素的布局宽度和高度，包括元素的边框、内边距和内容的尺寸。
二、使用 clientWidth 和 clientHeight 属性
const element = document.getElementById('myElement');
const width = element.clientWidth;
const height = element.clientHeight;clientWidth 和 clientHeight 返回元素的内容区域宽度和高度，加上内边距大小，但不包括边框和滚动条。
三、通过元素的 style 属性设置并获取尺寸
const element = document.getElementById('myElement');
// 先设置元素的尺寸属性，假设单位为像素
element.style.width = '200px';
element.style.height = '150px';
const width = parseInt(element.style.width);
const height = parseInt(element.style.height);这种方法需要先设置元素的尺寸属性，然后通过 style 属性获取，但只适用于已设置了 style 属性的元素，并且获取的值是字符串类型，需要进行类型转换。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
