トピックの概要
- HTMLグローバル属性（グローバル属性）は何（H5を含みます）
- ページの方法で非表示にする要素があるのですか？
- 指定された文字の最後の文字列の除去
答えの対象
HTMLグローバル属性（グローバル属性）は何（H5を含みます）
| アクセスキー |
引当金は、ショートカットキーの要素を活性化。 |
| クラス |
一つ以上の所定のクラス名要素（参照されるクラス・スタイル・シート）。 |
| contentEditable |
要素の内容の規定を編集することができるかどうか。 |
| コンテキストメニュー |
コンテキストメニュー要素の規定。ユーザーが要素をクリックするとコンテキストメニューが表示しました。 |
| データ-* |
プライベートカスタムページやアプリケーションのためのデータストレージ。 |
| 君 |
テキスト要素のコンテンツの規定方向。 |
| ドラッグ可能 |
要素の規定をドラッグすることができるかどうか。 |
| ドロップゾーン |
コピー、移動、またはリンクにあなたがドラッグされているデータをドラッグするかどうかを指定します。 |
| 隠されました |
要素のまだか、もはや関連規定。 |
| ID |
のみ提供id要素。 |
| のみ |
これは、要素の内容の言語を定義します。 |
| スペルチェック |
スペルや文法チェックの要素の規定かどうか。 |
| スタイル |
CSSスタイルのラインの所定の要素の中で。 |
| tabindex属性 |
要素のタブ順序の規定。 |
| タイトル |
要素に関する追加情報の提供。 |
| 訳します |
かどうかの規定は、要素の内容を翻訳する必要があります。 |
ページの方法で非表示にする要素があるのですか？
1.オーバーフロー
.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 /クリップパス
.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インデックス
.hide{
position:absolute;
z-index:-1000;/* 使其它元素遮盖该元素也算是一种隐藏,不占据空间，无法点击 */
}
.hide{
transform: scale(0,0)/* 占据空间，无法点击 */
}
9.margin
.hide{
margin-left:-100%;/*占位*/
}
10.textインデント、フォントサイズ（テキスト要素内のブロックのみ）
.hide{
text-indent:-9999px;
}
.hide{
font-size:0;
}
11.width和高さ
.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'));