有没有办法显示/隐藏没有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的元素？

回答

相关问题