有沒有辦法顯示/隱藏沒有CSS的元素？

我正在製作一個符合Web UI 508的標準，並且有一個要求規定「禁用CSS時使用Web UI」。我們有幾個地方使用style=display:inline和style=display:none來顯示/隱藏元素，並使用JS函數調用相應地調用它們。當我禁用CSS（使用WAT2.0）時，隱藏的元素也被顯示出來，不會使UI好。我們在幾個地方有這些東西，如摺疊/擴展的描述，鼠標移動彈出等。有沒有辦法顯示/隱藏沒有CSS的元素？

除了使用樣式標籤以外，還有其他方式顯示/隱藏元素嗎？請指教！

來源

2010-01-12 vpram86

這聽起來很麻煩，但你可能建立一個簡單的庫，實際上從DOM中刪除節點，並在需要時注入它們。您仍然可以擁有一個將所有已刪除節點保存爲變量的對象，以便在插入時不必重新創建它們。

但是我必須指出，當需求指定站點應該禁用CSS時，這很少意味着它應該在禁用CSS的所有方面上以完全相同的方式運行。例如，如果你有一個展開/摺疊列表，我假設禁用CSS的人可以接受的折衷辦法是始終顯示列表中所有項目的內容。

來源

2010-01-12 13:04:54

+1我同意100％ – 2010-01-12 13:07:07

謝謝大衛。在我的情況下，除了擴展/崩潰之外，還有很多使用這個東西的地方。例如，在一個特定的區域，我們彈出一個表格。所以默認情況下其隱藏。在禁用CSS的情況下，這些表格顯示出來對用戶來說並不合適。 – vpram86 2010-01-12 13:08:41

我不確定這是可能的。這聽起來像是頁面的設計真的應該圍繞這個要求。

我認爲你應該這樣做，就好像你沒有任何JavaScript一樣。那麼你將不得不依靠頁面刷新來顯示/隱藏元素。即當您單擊以顯示/隱藏某些內容時，請刷新頁面，然後您的服務器端代碼將執行該字段是否位於頁面上的邏輯。

如果它是一個輸入字段，我想它仍然可以作爲隱藏字段包含在內？

這聽起來可能有點笨重，但實際上是一個相當不錯的事情，因爲你是沿着路徑移動到不顯眼的JavaScript

來源

2010-01-12 13:07:09

謝謝詹姆斯。如果沒有別的東西給我，我會保留這個解決方案作爲最後的手段。就像你現在一樣，它需要很多來回流量，並可能降低UI本身的可用性。:( – vpram86 2010-01-12 13:10:24

您可以從DOM中刪除，而不是隱藏它們的元素，但我不」我認爲這樣做是有充分理由的。據我所知，屏幕閱讀器將尊重display: none，我想不出任何其他原因客戶端應該支持腳本，但不是CSS ...

你應該做的是確保該網站仍然用腳本禁用（只要它是一個真正的網站，而不是一個Web應用程序）可用：漸進增強/優雅降級是這裏的關鍵短語...

來源

2010-01-12 13:09:06 Christoph

謝謝克里斯托夫，我會牢記這一點 – vpram86 2010-01-12 13:13:44

在這種情況下用JavaScript做到這一點。只需從身體標籤中移除元素，並在需要時將其放回。

window.holder = []; 
function switchNodes(source, target){ 
    var parentNode = source.parentNode; 
    if(parentNode && !target.parentNode){ 
     parentNode.insertBefore(target,source); 
     parentNode.removeChild(source); 
     return true; 
    } 

    return false; 
} 

function show(node){ 
    for(var i=0,item;item = holder[i];i++){ 
     if(item.node == node){ 
      var span = item.span; 
      switchNodes(span, node); 
      holder.splice(i,1); 
      return true; 
     } 
    } 

    return false; 
} 

function hide(node){ 
    var span = document.createElement("span"); 
    if(switchNodes(node,span)){ 
     holder.push({node: node, span : span}); 
     return true; 
    } 
    return false; 
}

來源

2010-01-12 13:15:35 nemisj

第508條似乎是美國有關網絡可訪問性的一些規定。

擁有的東西，動態顯示和隱藏在鼠標移動或點擊是不是所有的好可訪問性。屏幕閱讀器軟件往往非常簡單，並且不一定知道如何處理頁面的動態更改。

我建議您設計網頁使用清潔語義HTML，看起來不錯的CSS關閉，然後用CSS和JavaScript，使頁面更吸引人的還是強大的在那裏的支持。也可以嘗試在開發期間預覽您的網站Links。

來源

2010-01-12 13:16:45

我測試過的當前網絡屏幕閱讀器或者坐在現有瀏覽器的頂部，或者嵌入瀏覽器來渲染頁面，以便合理地處理動態網站。 – 2010-01-12 14:04:49

您也可以考慮顯示/隱藏服務器端的元素。不要使用Javascript，只需將表單提交給服務器，並利用JSP中taglibs和EL的強大功能。

E.g.

<c:if test="${someCondition}"> 
    <p>This is displayed if ${someCondition} evaluates to true.</p> 
</c:if>

一個額外的好處是，這也將使你的Javascript 不顯眼，其中談到可訪問時，肯定是高度讚賞。

來源

2010-01-12 13:21:22 BalusC

的Web UI 508合規性要求，所有內容可用與風格或文件中的用戶是用戶訪問，而沒有─這通常意味着超鏈接靜態頁面，但它也可以涉及使用服務器端代碼來模擬動態腳本。

通過從可訪問的站點開始，然後添加受支持的樣式和腳本功能，可訪問站點總是最容易開發。

來源

2010-01-12 13:35:11 kennebec

「with風格*或腳本*「是這裏的操作語句，我想說，這個問題的其餘部分都是無效的 – 2010-01-12 14:35:24

##我通常我用這樣的方式：##

if (this.RadioButtonList1.SelectedValue == "Date") { this.divByDate.Attributes.Add("style", "display:block"); } 
    else { divByDate.Attributes.Add("style", "display:none"); }

來源

2010-01-12 14:27:04 civanm

我覺得網絡是什麼，但字符的連續字符串，所以用我的方法，你可以抓住一個元素的innerHTML和修改它以動態操縱頁面的來源。有幾種方法可以解決這個問題。

只需通過將其innerHTML設置爲空字符串來刪除父元素中的內容即可。
```
document.getElementById('myElement').innerHTML = ''; 
```
我用另一種便宜的竅門是在我的源代碼添加HTML註釋，所以我可以添加各種各樣的「標籤」，並抓住它們之間的文本使用正則表達式。
```
<body> 
     
    <div>Hello World.</div> 
     
    <div>Au revoir.</div> 
</body> 
```
然後，您可以使用JavaScript正則表達式替換標記之間的所有內容。
```
document.body.innerHTML = document.body.innerHTML.replace(/\<!--Start--\>[\s\S]*\<!--End--\>/i, ''); 
```
正則表達式查找標籤，然後零個或多個空格或非空白字符，然後我的標籤，並用一個空字符串替換它，讓你有以下幾點。
```
<body> 
    <div>Au revoir.</div> 
</body> 
```
和當然，你總是可以使用JavaScript庫（jQuery的，MooTools的，原型等）來幫助你做一些這方面。這些庫有刪除DOM對象的方法。

如果你想成爲能夠將內容寫回，只是將它保存到一個變量，並與它內部的標識插入HTML註釋。做另一個正則表達式替換，它回來了。

來源

2010-01-12 14:54:51

有沒有辦法顯示/隱藏沒有CSS的元素？

回答

相關問題