JavaScriptの表示・非表示、HTML要素の作成・削除の使用例を詳しく解説-jsチュートリアル-php.cn

JavaScriptの表示・非表示、HTML要素の作成・削除の使用例を詳しく解説

伊谢尔伦

リリース： 2017-07-18 15:32:40

オリジナル

2059 人が閲覧しました

表示/非表示

1. js関数を書く

<script type="text/javascript"> 
function display(y){$(y).style.display=($(y).style.display=="none")?"":"none";} 
function $(s){return document.getElementById(s);} 
</script>

ログイン後にコピー

2. 表示/非表示にするhtml要素にid属性を追加する

<table> 
<tr id="menu" > 
<td>控制这个tr的显示/隐藏</td> 
</tr> 
</table>

ログイン後にコピー

3. js関数をトリガーするボタンやリンクなどを追加する

<input type="button" onclick="display(&#39;menu&#39;)" value="显示/隐藏"/> 
<a href="#" onclick="display(&#39;menu&#39;)" >显示/隐藏</a> 
javascript显示隐藏层<div id="layer" style="display:none;">广告</div> 
<input type="botton" onclick="display(layer)">

ログイン後にコピー

2: 2つのメソッドページコントロールの非表示を制御する JavaScript
ページコントロールの非表示と表示を制御する JavaScript の 2 つの方法
方法 1:

document.all["PanelSMS"].style.visibility="hidden"; 
document.all["PanelSMS"].style.visibility="visible";

ログイン後にコピー

。

方法 2:

document.all["PanelSMS"].style.display="none"; 
document.all["PanelSMS"].style.display="inline";

ログイン後にコピー

方法 1 を非表示にした後のページの位置はまだコントロールによって占有されていますが表示されません
方法 2 非表示後のページの位置は占有されていません

作成/削除

div要素を作成したい場合。

1. DOM オブジェクトを使用して作成する:

document.createElement('div') メソッドを使用して要素を作成します。

2. JQuery を使用して作成する:

$('

JQuery

') メソッドを使用して要素を直接作成します。

ID「div2js」の div 要素を削除する必要がある場合。

1. DOM オブジェクトの使用

まず、削除された要素の親要素を見つけ、その親要素を通じて削除する必要がある子要素を削除する必要があります。

var el = document.getElementById(&#39;div2js&#39;);
 el.parentNode.removeChild(el);

ログイン後にコピー

2. JQuery

を使用して直接検索して削除します。

$(&#39;#div2js&#39;).remove();

ログイン後にコピー

最後に例を見てみましょう

<script type="text/javascript" language="Javascript">
function InputOnBlur()
{    var name=document.getElementById("name").value;
 
     if(name.length >10 || name.length<2)
       {
        var element=document.getElementById("message");
      if(element)
      {
      //alert(element.parentNode.innerHTML);
      element.parentNode.removeChild(element);
      }
               var MySpan=document.createElement("span");
               document.getElementById("containers").appendChild(MySpan);
               MySpan.id = "message";
               MySpan.innerHTML = "<img src=&#39;false.jpg&#39; alt=&#39;请输入正确的姓名&#39;/>请输入正确的姓名";
        }
         
     else{
      var element=document.getElementById("message");
      if(element)
      {
      //alert(element.innerHTML);
      element.parentNode.removeChild(element);
      }
               var MySpan=document.createElement("span");
               document.getElementById("containers").appendChild(MySpan);
               MySpan.id = "message";
               MySpan.innerHTML = "<img src=&#39;true.gif&#39; alt=&#39;该用户名输入正确&#39;/>该用户名输入正确";
          }
}
</script>
<div> 
姓名：<input id="name" type="text" onblur="InputOnBlur()" /><span id="containers"></span></div> 
<script language="javascript"> 
document.getElementById("containers").innerHTML = "<font color=red>请输入姓名</font>";

ログイン後にコピー

以上がJavaScriptの表示・非表示、HTML要素の作成・削除の使用例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。