代码之家 › 专栏 › 技术社区 › vpram86

有没有一种方法可以在没有CSS的情况下显示/隐藏元素?

section508 jsp css javascript

vpram86 · 技术社区 · 16 年前

我正在使一个WebUI508兼容,一个要求声明“在禁用CSS时使用WebUI”。我们有几个地方可以使用 style=display:inline style=display:none

9 回复 | 直到 13 年前

David Hedlund 16 年前

这听起来很麻烦,但你能够

不过,我必须说,当需求指定站点应该在禁用CSS的情况下工作时,这很少意味着它应该正常工作 在各方面都完全相同 与CSS禁用。例如,如果您有一个可展开/可折叠的列表,我假设对于那些禁用CSS的人来说,一个可接受的折衷方案是始终显示列表中所有项目的内容。

kennebec 16 年前

内容

一个可访问的站点总是最容易开发的,从一个可访问的站点开始,然后添加支持的样式和脚本功能。

nemisj 16 年前

在本例中,使用javascript完成。只需从body标签中删除元素,并在需要时将其放回原处。

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;
}

BalusC 16 年前

您还可以考虑在服务器端显示/隐藏元素。不要使用Javascript,只需将表单提交给服务器,并利用JSP中taglibs和EL的强大功能。

例如。

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

不引人注目的

Mutation Person 16 年前

我不确定这是否可行。听起来页面的设计真的应该围绕这个要求。

我认为您应该像没有任何JavaScript一样处理这个问题。然后您必须依靠页面刷新来显示/隐藏元素。即,当您单击以显示/隐藏某些内容时,刷新页面,然后服务器端代码将执行该字段是否包含在页面上的逻辑。

如果它是一个输入字段,我想它仍然可以作为一个隐藏字段包含?

这听起来可能有点笨拙,但实际上是一件非常好的事情,因为您正沿着不引人注目的JavaScript的道路前进

Christoph 16 年前

您可以从DOM中删除元素,而不是隐藏它们,但我认为没有理由这么做。据我所知,屏幕上的读者会尊重 display: none ,我想不出客户端应该支持脚本,但不支持CSS的任何其他原因。。。

您应该做的是确保该站点在禁用脚本的情况下仍然可用(只要它是实际站点而不是web应用程序):渐进增强/优雅降级是这里的关键短语。。。

Tobias Cohen 16 年前

第508条似乎是美国对网络无障碍性的某种规定。

我建议您设计页面时使用干净的语义HTML,在关闭CSS的情况下看起来不错,然后使用CSS和JavaScript使页面在受支持的地方更具吸引力或功能更强大。还可以尝试在中预览您的站点 Links 在开发过程中。

civanm 16 年前

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

Brandon McKinney 16 年前

我认为web只不过是一个连续的字符串,因此使用我的方法,您可以获取元素的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, '');
```
正则表达式找到标记,然后找到零个或多个空格或非空格字符,后跟my标记,并将其替换为空字符串,剩下以下内容。
```
<body>
  <div>Au revoir.</div>
</body>
```

如果希望能够写回内容,只需将其保存到变量中,并在其中插入带有标识符的HTML注释。再替换一个正则表达式,它就回来了。

cseelus 5 年前

是的,有,使用 <details>

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

有关此HTML标记的详细信息可以在 MDN web docs