每日思考（2019/12/11）

Posted 2021-03-23 ericzlin

题目概览

• html全局属性(global attribute)有哪些（包含H5）
• 在页面上隐藏元素的方法有哪些？
• 去除字符串中最后一个指定的字符

题目解答

HTML全局属性(global attribute)有哪些（包含H5）

属性	描述
accesskey	规定激活元素的快捷键。
class	规定元素的一个或多个类名（引用样式表中的类）。
contenteditable	规定元素内容是否可编辑。
contextmenu	规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
data-*	用于存储页面或应用程序的私有定制数据。
dir	规定元素中内容的文本方向。
draggable	规定元素是否可拖动。
dropzone	规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden	规定元素仍未或不再相关。
id	规定元素的唯一 id。
lang	规定元素内容的语言。
spellcheck	规定是否对元素进行拼写和语法检查。
style	规定元素的行内 CSS 样式。
tabindex	规定元素的 tab 键次序。
title	规定有关元素的额外信息。
translate	规定是否应该翻译元素内容。

在页面上隐藏元素的方法有哪些？

1. overflow

.hide{
     overflow:hidden; /* 用来隐藏元素溢出部分，占据空间，无法响应点击事件 */
}

2.opacity

.hide{
    opacity:0;/* 占据空间，可以点击 */
}
.hide_2{
    -webkit-filter:opacity(0);
    filter:opacity(0);/* webkit内核,占据空间，可以点击 */
}
/*opacity是用来设置元素透明度的，但当设置成0的时候也就相当于隐藏元素了。因此，元素依然存在原来的位置，占据空间也可响应事件，元素的行为就和它们不透明时一致*/

3.visibility

.hide{
    visibility:hidden; /* 占据空间，无法点击 */
}
/*如同 opacity 属性，被隐藏的元素依然会对我们的网页布局起作用。与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏*/

4.display

.hide{
    display:none;/* 不占据空间，无法点击 */
}
/*经典的display隐藏元素,这个是彻底的隐藏了元素，不占据空间，也就不影响布局，当然也无法响应事件。*/

5.position

.hide{
    position：absolute;
    left:-99999px;
    top:-90999px;/* 不占据空间，无法点击 */
}
.hide-2{
    position：relative;
    left:-99999px;
    top:-90999px;/* 占据空间，无法点击 */
}
/*假设有一个元素你想要与它交互，但是你又不想让它影响你的网页布局，没有合适的属性可以处理这种情况（opacity 和 visibility 影响布局， display 不影响布局但又无法直接交互——译者注）。在这种情况下，你只能考虑将元素移出可视区域。这个办法既不会影响布局，有能让元素保持可以操作。下采用这种办法未尝不可*/

6.clip/clip-path

.hide{
    position:absolute;/*fixed*/
    clip:rect(top,right,bottom,left);/* 占据空间，无法点击 */
}
.hide_2 {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}
/*隐藏元素的另一种方法是通过剪裁它们来实现。在以前，这可以通过 clip 属性来实现，但是这个属性被废弃了(现在浏览器依然支持)，换成一个更好的属性叫做 clip-path,可以很容易的实现一些复杂的图形,但可惜的是依旧只能在chrome40+浏览器里使用.*/

7.z-index

.hide{
    position:absolute;
    z-index:-1000;/* 使其它元素遮盖该元素也算是一种隐藏,不占据空间，无法点击 */
}

8. transform

.hide{
    transform: scale(0,0)/* 占据空间，无法点击 */
}

9.margin

.hide{
    margin-left:-100%;/*占位*/
}

10.text-indent和font-size（仅对块内文本元素）

.hide{
    text-indent:-9999px;
}
.hide{
    font-size:0;
}

11.width和height

.hide{
    width:0;
    height:0;
}

去除字符串中最后一个指定的字符

//方式一：lastIndexOf
function delLast(str, delChar) {
    if (!str || typeof str !== 'string' || !delChar || typeof delChar !== 'string') return false;
    let arr = str.split('');
    let idx = arr.lastIndexOf(delChar);
    arr.splice(idx, 1);
    return arr.join('');
}
console.log(delLast('qwerttqy','q'))
//方式二:replace＋正则匹配
function delLast(str,delChar) {
  if (!str || typeof str !== 'string' || !delChar || typeof delChar !== 'string') return false;
  let reg =new RegExp(`${delChar}(?=([^${delChar}]*)$)`)
  return str.replace(reg,'')
}
//方式三：for循环找出这个字符，再slice拼接
String.prototype.splitStringLastChar = function (s) {
    let len = this.length - 1;
    for (; len >= 0; len--) {
        if (this[len] === s) {
            return this.slice(0, len) + this.slice(len + 1, this.length)
        }
    }
    return this.toString();
}
console.log('dasdadafasfa'.splitStringLastChar('f'));