每日思考(2019/12/11)
题目概览
- 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'));
【转载文章务必保留出处和署名,谢谢!】