2012-01-04 41 views
6

Tôi muốn viết một tập lệnh viết tắt để tắt một div trên một trang nhất định. Trên bất kỳ tải nào của trang tôi không biết vị trí trong DOM div sẽ là gì nhưng tôi biết nó luôn được gọi là <div id = "alertPanel"> ....</div>Làm thế nào để vô hiệu hóa các khối div có một mẫu id nhất định?

Tôi sẽ làm cách nào để vô hiệu hóa div này?

những suy nghĩ ban đầu của tôi là một cái gì đó dọc theo dòng:

var myDivs= document.getElementsByTagName('div'); 

for (i=0; i<myDivs.length; i++) 
{ 

    if (myDivs[i].<get id property somehow> = "alertPanel") 
    myDivs[i].style.visibility = 'hidden'; 
} 

nhưng khi bạn có thể nói tôi bị mắc kẹt tại truy cập vào các tài sản id cho một kiểm tra bình đẳng.

Ngẫu nhiên, tôi đang sử dụng một trình soạn thảo văn bản để viết những dòng này - Tôi đoán rằng một tiêu chuẩn javascript biên tập sẽ cung cấp một danh sách tự động hoàn sau khi nhập myDivs[i].

Trả lời

12

Nếu nó có một id, bạn có thể sử dụng document.getElementById:

var div = document.getElementById("alertPanel"); 

Sau đó, nếu nó tồn tại, bạn có thể xóa nó (có thể là một ý tưởng tồi) hoặc ẩn nó:

if (div) { 
    div.style.display = "none"; // Hides it 
    // Or 
    // div.parentNode.removeChild(div); // Removes it entirely 
} 

Cập nhật: Re xét của bạn về câu trả lời khác:

nhờ cho câu trả lời của bạn. Statemt của bạn có áp dụng cho một trang có iframe không. Div đang đề cập đến trong iframe. Tôi đã thử giải pháp ypur và nó không hoạt động không may. có thể là một liên kết tới trang sẽ giúp: tennis.betfair.com div tôi muốn vô hiệu hóa là một với id: minigamesContainer

Nếu nguyên tố này là trong một iframe, sau đó bạn phải gọi getElementById trên tài liệu đó là trong số iframe, vì iframe là các cửa sổ riêng biệt và có các tài liệu riêng biệt. Nếu bạn biết id của iframe, bạn có thể sử dụng document.getElementById để có được những ví dụ iframe, và sau đó sử dụng contentDocument để truy cập tài liệu của nó, và sau đó sử dụng getElementById trên rằng để có được những "minigamesContainer" yếu tố:

var iframe, div; 
iframe = document.getElementById("the_iframe_id"); 
if (iframe) { 
    try { 
     div = iframe.contentDocument.getElementById("minigamesContainer"); 
     if (div) { 
      div.style.display = "none"; 
     } 
    } 
    catch (e) { 
    } 
} 

(Có try/catch là do có lỗi bảo mật tiềm năng khi truy cập nội dung của khung nội tuyến; Tôi không biết Greasemonkey đủ tốt để biết liệu SOP có áp dụng cho nó hay không. Tôi có xu hướng giả định nó không, nhưng an toàn hơn .. .)

Nếu bạn không biết id của iframe hoặc nếu nó không có, bạn có thể chỉ lặp qua tất cả trong số họ bằng cách cho họ document.getElementsByTagName và sau đó lặp:

var iframes, index, iframe, div; 
iframes = document.getElementsByTagName("iframe"); 
for (index = 0; index < iframes.length; ++index) { 
    iframe = iframes[index]; 
    try { 
     div = iframe.contentDocument.getElementById("minigamesContainer"); 
     if (div) { 
      div.style.display = "none"; 
      break; 
     } 
    } 
    catch (e) { 
    } 
} 

Tài liệu tham khảo :

+0

Điều này làm việc tuyệt vời - cảm ơn bạn - nhưng nếu, thay vì chỉ tìm kiếm 'alertPanel', tôi cũng ** muốn ẩn' alertPanel2' hoặc 'alertPanel3'? (Tôi đang cố gắng tìm hiểu các khái niệm cơ bản về javascript - Tôi hơi lo lắng về việc thử nghiệm.) –

1

Trong HTML hợp lệ bạn có thể chỉ có phần tử với ID nhất định. Vì vậy:

document.getElementById('alertPanel').style.visiblity = 'hidden'; 

Nhưng nếu bạn vẫn cần phải lặp tất cả của div và kiểm tra ID của họ, sau đó điều này sẽ làm việc:

if (myDivs[i].id == "alertPanel") myDivs[i].style.visibility = 'hidden'; 
+1

Lưu ý rằng một yếu tố với 'visibility: hidden' chiếm không gian trên màn hình ngay cả khi không được hiển thị trong khi một yếu tố với' display: none' không. – kba

Các vấn đề liên quan