每日思考（2019/12/11）

标签：页面   osi   standard   移动   影响   das   ted   new   作用   

题目概览

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

题目解答

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

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

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'));

每日思考（2019/12/11）

标签：页面   osi   standard   移动   影响   das   ted   new   作用   

原文地址：https://www.cnblogs.com/EricZLin/p/12026534.html