js隱藏網頁元素

獲取網頁元素

document.getElementsByName("title");

document.getElementsByTagName("title");

document.getElementsByClassName("title");

 

利用來JS控制頁面控件顯示和隱藏有兩種方法，兩種方法分別利用HTML的style中的兩個屬性，兩種方法的不同之處在於控件隱藏后是否還在頁面上占空位。

方法一：

document.getElementById("EleId").style.visibility="hidden";
document.getElementById("EleId").style.visibility="visible";

　　利用上述方法實現隱藏后，頁面的位置還被控件占用，顯示空白。
方法二：

document.getElementById("EleId").style.display="none";
document.getElementById("EleId").style.display="inline";

　　利用上述方法實現隱藏后，頁面的位置不被占用。

 

如果是 ByClassNam 或者 ByTagName ，例如

document.getElementsByClassName("title").style.display="none"

會報錯：Uncaught TypeError: Cannot set property 'display' of undefined

因為得到的是一個由class="xxx"的所有元素組成的集合，而不是單個元素；集合是沒有display屬性的，集合中的元素才有display屬性。當你試圖做 集合.style.display的時候，自然會報錯。

正確方法是加上一個下標，

document.getElementsByClassName("title")[0].style.display='none'

或者遍歷讓集合所有的元素生效

var x=document.getElementsByClassName("title");
            for (var i = 0; i<x.length;i++) {
                   x[i].style.display="none";
                 };