javascript - CSSなしで要素を表示/非表示にする方法はありますか？

Question

1つのWebUI508に準拠させており、1つの要件には「CSSが無効になっている場合にWebUIを操作する」と記載されています。JS関数呼び出しを使用して要素を表示/非表示にし、それに応じてstyle=display:inline要素を呼び出す場所がいくつかあります。style=display:noneCSSを無効にすると（WAT2.0を使用）、非表示の要素も表示され、UIが適切になりません。折りたたまれた/展開された説明、mousemoveのポップアップなど、いくつかの場所にこのようなものがあります。

スタイルタグを使用する以外に要素を表示/非表示にする方法はありますか？ご意見をお聞かせください！

score 12 · Accepted Answer

これは面倒に思えますが、ノードを DOM から実際に削除し、必要なときにノードを挿入する単純なライブラリを構築できます。削除されたすべてのノードを変数として保存するオブジェクトを引き続き使用できるため、挿入時にそれらを再作成する必要はありません。

ただし、CSS を無効にしてサイトが動作するように要件で指定されている場合、CSS を無効にしてもすべての点でまったく同じように機能することはめったにありません。たとえば、展開/折りたたみ可能なリストがある場合、CSS が無効になっている人にとって許容できる妥協点は、リスト内のすべてのアイテムのコンテンツを常に表示することだと思います。

score 6 · Accepted Answer

Web UI 508 準拠では、スタイルまたはスクリプトを使用してユーザーが利用できるすべてのコンテンツに、ユーザーがアクセスできるようにする必要があります。多くの場合、これは静的ページへのハイパーリンクを意味しますが、サーバー側コードを使用して動的スクリプトをシミュレートすることも必要になる場合があります。

アクセス可能なサイトは、アクセス可能なサイトから開始し、サポートされているスタイルとスクリプト機能を追加することによって、常に最も簡単に開発できます。

score 4 · Accepted Answer

この場合は、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;
}

score 4 · Accepted Answer

サーバー側で要素を表示/非表示にすることも検討できます。Javascript を使用する代わりに、フォームをサーバーに送信するだけで、JSP で taglibs と EL の機能を利用できます。

例えば

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

追加の利点は、これにより Javascriptが邪魔にならないようになることです。これは、アクセシビリティについて話すときに非常に高く評価されています。

score 3 · Accepted Answer

これが可能かどうかはよくわかりません。ページのデザインは、実際にはこの要件に沿っている必要があるようです。

JavaScriptも持っていないかのようにこれに取り組むべきだと思います。次に、要素を表示/非表示にするためにページの更新に依存する必要があります。つまり、クリックして何かを表示/非表示にし、ページを更新すると、サーバー側のコードがフィールドがページに含まれているかどうかのロジックを実行します。

それが入力フィールドである場合、隠しフィールドとしてまだ含めることができると思いますか?

これは少しぎこちなく聞こえるかもしれませんが、目立たない JavaScript への道を歩んでいるので、実際には非常に良いことです。

score 3 · Accepted Answer

要素を非表示にする代わりに DOM から要素を削除することもできますが、そうする正当な理由はないと思います。私の知る限り、スクリーンリーダーはを尊重display: noneします。また、クライアントがスクリプトをサポートする必要があるが、CSS をサポートしない理由は他に考えられません...

あなたがすべきことは、スクリプトを無効にしてもサイトが引き続き使用可能であることを確認することです (それが実際のサイトであり、Web アプリではない限り): プログレッシブエンハンスメント/グレースフルデグラデーションがここでのキーフレーズです...

score 2 · Accepted Answer

セクション 508 は、Web アクセシビリティに関する米国の規制のようなものです。

マウスの移動やクリックに合わせて動的に非表示にしたり表示したりすることは、アクセシビリティにとってそれほど良いことではありません。スクリーンリーダーソフトウェアはかなり単純な傾向があり、ページの動的な変更を処理する方法を必ずしも知っているとは限りません。

CSS をオフにしても見栄えのよいクリーンなセマンティック HTML を使用するようにページを設計し、サポートされている場合は CSS と JavaScript を使用してページをより魅力的または強力にすることをお勧めします。また、開発中にリンクでサイトをプレビューしてみてください。

score 1 · Accepted Answer

私は Web を文字の連続した文字列にすぎないと考えています。そのため、私の方法論では、要素の innerHTML を取得し、それを変更して、ページのソースを動的に操作できます。これにはいくつかの方法があります。

innerHTML を空白文字列に設定して、親要素内のコンテンツを削除するだけです。
```
document.getElementById('myElement').innerHTML = '';
```
私が使ったもう 1 つの安価なトリックは、ソースに HTML コメントを追加して、ある種の「タグ」を追加し、それらの間のテキストを正規表現で取得できるようにすることです。
```
<body>
  
    <div>Hello World.</div>
  
  <div>Au revoir.</div>
</body>
```
次に、JavaScript 正規表現を実行して、タグ間のすべてを置き換えることができます。
```
document.body.innerHTML = document.body.innerHTML.replace(/\<!--Start--\>[\s\S]*\<!--End--\>/i, '');
```
正規表現はタグを検出し、0 個以上の空白文字または空白文字以外の文字とそれに続く my タグを検出し、それを空白文字列に置き換えて、次のようにします。
```
<body>
  <div>Au revoir.</div>
</body>
```
そしてもちろん、JavaScript ライブラリ (jQuery、Mootools、Prototype など) をいつでも使用して、これを行うことができます。これらのライブラリには、DOM オブジェクトを削除するためのメソッドがあります。

コンテンツを書き戻せるようにしたい場合は、変数に保存し、その中に識別子を含む HTML コメントを挿入するだけです。別の正規表現の置換を行うと、元に戻ります。

score 1 · Accepted Answer

## 私は通常、このように使用します: ##

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

score 0 · Accepted Answer

はい、<details>要素を使用して、コラボ可能なコンテンツを作成できます。

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

この HTML タグに関する広範な情報は、MDN Web ドキュメント内にあります。

javascript - CSSなしで要素を表示/非表示にする方法はありますか？

10 に答える 10

Related

Reference