มีวิธีแสดง/ซ่อนองค์ประกอบที่ไม่มี CSS หรือไม่

ฟังดูยุ่งยาก แต่คุณ สามารถ สร้างไลบรารีง่ายๆ ที่จะลบโหนดออกจาก DOM และฉีดกลับเมื่อจำเป็น คุณยังคงมีออบเจ็กต์ที่บันทึกโหนดที่ถูกลบทั้งหมดเป็นตัวแปรได้ เพื่อที่คุณจะได้ไม่ต้องสร้างโหนดเหล่านั้นใหม่เมื่อทำการแทรก

อย่างไรก็ตาม ฉันต้องบอกว่าเมื่อข้อกำหนดระบุว่าไซต์ควรทำงานโดยปิดใช้งาน CSS นั่นแทบจะไม่หมายความว่าไซต์ควรจะทำงานในลักษณะเดียวกันทุกประการทุกประการโดยปิดใช้งาน CSS ตัวอย่างเช่น หากคุณมีรายการที่ขยาย/ยุบได้ ฉันถือว่าการประนีประนอมที่ยอมรับได้สำหรับผู้ที่ปิดใช้งาน CSS คือการแสดงเนื้อหาของรายการทั้งหมดในรายการเสมอ

การปฏิบัติตามข้อกำหนดของ Web UI 508 กำหนดให้ เนื้อหา ทั้งหมดที่มีให้กับผู้ใช้ที่มีสไตล์หรือสคริปต์นั้นจะต้องสามารถเข้าถึงได้โดยผู้ใช้ โดยไม่บ่อยนัก ซึ่งหมายถึงการไฮเปอร์ลิงก์ไปยังเพจแบบคงที่ แต่ยังอาจเกี่ยวข้องกับการใช้โค้ดฝั่งเซิร์ฟเวอร์เพื่อจำลอง สคริปต์แบบไดนามิก

ไซต์ที่สามารถเข้าถึงได้นั้นง่ายที่สุดในการพัฒนาโดยเริ่มจากไซต์ที่สามารถเข้าถึงได้ จากนั้นจึงเพิ่มฟีเจอร์สไตล์และสคริปต์ตามที่ได้รับการสนับสนุน

ในกรณีนี้ทำได้ด้วยจาวาสคริปต์ เพียงลบองค์ประกอบออกจากแท็กเนื้อหาแล้ววางกลับคืนเมื่อจำเป็น

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

คุณยังสามารถพิจารณาแสดง/ซ่อนองค์ประกอบในฝั่งเซิร์ฟเวอร์ได้ด้วย แทนที่จะใช้ Javascript เพียงส่งแบบฟอร์มไปยังเซิร์ฟเวอร์และใช้พลังของ taglibs และ EL ใน JSP

E.g.

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

ข้อดีอีกอย่างคือ การทำเช่นนี้จะทำให้ Javascript ของคุณไม่เกะกะ ซึ่งได้รับความนิยมอย่างสูงอย่างแน่นอนเมื่อพูดถึงความสามารถในการเข้าถึง

ฉันไม่แน่ใจจริงๆว่าจะเป็นไปได้ ดูเหมือนว่าการออกแบบเพจควรจะเป็นไปตามข้อกำหนดนี้จริงๆ

ฉันคิดว่าคุณควรเข้าใกล้สิ่งนี้ราวกับว่าคุณไม่มี JavaScript เลย จากนั้นคุณจะต้องอาศัยการรีเฟรชหน้าเพื่อแสดง/ซ่อนองค์ประกอบ เช่น. เมื่อคุณคลิกเพื่อแสดง/ซ่อนบางสิ่ง ให้รีเฟรชเพจ จากนั้นโค้ดฝั่งเซิร์ฟเวอร์ของคุณจะดำเนินการตรรกะว่าฟิลด์นั้นรวมอยู่ในเพจหรือไม่

หากเป็นช่องป้อนข้อมูล ฉันคิดว่ายังสามารถรวมเป็นช่องที่ซ่อนอยู่ได้หรือไม่

อาจฟังดูเทอะทะเล็กน้อย แต่จริงๆ แล้วเป็นสิ่งที่ดีทีเดียว เนื่องจากคุณกำลังก้าวไปตามเส้นทางสู่ JavaScript ที่ไม่สร้างความรำคาญ

คุณสามารถลบองค์ประกอบออกจาก DOM แทนที่จะซ่อนองค์ประกอบเหล่านั้นได้ แต่ฉันไม่คิดว่ามีเหตุผลที่ดีที่จะทำเช่นนั้น เท่าที่ฉันรู้ โปรแกรมอ่านหน้าจอจะเคารพ display: none และฉันไม่สามารถนึกถึงเหตุผลอื่นใดที่ลูกค้าควรสนับสนุนการเขียนสคริปต์ แต่ไม่ใช่ CSS...

สิ่งที่คุณควรทำคือตรวจสอบให้แน่ใจว่าไซต์ยังคงใช้งานได้โดยปิดใช้งานสคริปต์ (ตราบใดที่เป็นไซต์จริงและไม่ใช่แอปพลิเคชันเว็บ): การเพิ่มประสิทธิภาพแบบก้าวหน้า/การย่อยสลายอย่างสง่างามเป็นวลีสำคัญที่นี่...

ดูเหมือนว่ามาตรา 508 จะเป็นข้อบังคับบางประการของสหรัฐอเมริกาสำหรับการเข้าถึงเว็บ

การมีสิ่งต่าง ๆ ที่ซ่อนอยู่และแสดงแบบไดนามิกเมื่อเลื่อนเมาส์หรือการคลิกนั้นไม่ได้ดีต่อการเข้าถึงทั้งหมด ซอฟต์แวร์โปรแกรมอ่านหน้าจอมีแนวโน้มที่จะค่อนข้างเรียบง่าย และไม่จำเป็นต้องรู้วิธีจัดการกับการเปลี่ยนแปลงแบบไดนามิกในเพจ

ฉันขอแนะนำให้ออกแบบเพจของคุณให้ใช้ HTML ความหมายที่ชัดเจนซึ่งดูดีเมื่อปิด CSS จากนั้นใช้ CSS และ JavaScript เพื่อทำให้เพจน่าสนใจหรือมีประสิทธิภาพมากขึ้นในส่วนที่รองรับ ลองแสดงตัวอย่างไซต์ของคุณใน ลิงก์ ในระหว่างการพัฒนา

## ปกติฉันใช้วิธีนี้: ##

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

ฉันคิดว่าเว็บเป็นเพียงชุดอักขระที่ต่อเนื่องกัน ดังนั้นด้วยวิธีการของฉัน คุณสามารถดึง HTML ภายในขององค์ประกอบและแก้ไขเพื่อจัดการแหล่งที่มาของหน้าแบบไดนามิกได้ มีหลายวิธีในการดำเนินการเกี่ยวกับเรื่องนี้

1. เพียงลบเนื้อหาภายในองค์ประกอบหลักโดยตั้งค่า innerHTML ให้เป็นสตริงว่าง

   document.getElementById('myElement').innerHTML = '';
   

2. เคล็ดลับราคาถูกอีกอย่างที่ฉันใช้คือการเพิ่มความคิดเห็น HTML ในแหล่งที่มาของฉัน เพื่อให้ฉันสามารถเพิ่ม "แท็ก" ประเภทต่างๆ และดึงข้อความระหว่างแท็กเหล่านั้นด้วยนิพจน์ทั่วไป

   <body>
     <!--Start-->
       <div>Hello World.</div>
     <!--End-->
     <div>Au revoir.</div>
   </body>
   

   จากนั้น คุณสามารถทำนิพจน์ทั่วไปของ JavaScript เพื่อแทนที่ทุกสิ่งระหว่างแท็กของคุณได้

   document.body.innerHTML = document.body.innerHTML.replace(/\<!--Start--\>[\s\S]*\<!--End--\>/i, '');
   

   นิพจน์ทั่วไปค้นหาแท็ก จากนั้นตามด้วยช่องว่างหรืออักขระที่ไม่ใช่ช่องว่างตั้งแต่ศูนย์ขึ้นไป ตามด้วยแท็กของฉัน และแทนที่ด้วยสตริงว่าง โดยเหลือเพียงสิ่งต่อไปนี้

   <body>
     <div>Au revoir.</div>
   </body>
   

3. และแน่นอน คุณสามารถใช้ไลบรารี JavaScript (jQuery, Mootools, Prototype ฯลฯ) ได้ตลอดเวลาเพื่อช่วยคุณทำสิ่งนี้ ไลบรารีเหล่านี้มีวิธีในการลบวัตถุ DOM

หากคุณต้องการที่จะเขียนเนื้อหากลับได้ เพียงบันทึกลงในตัวแปรและแทรกความคิดเห็น HTML พร้อมด้วยตัวระบุภายใน ทำการแทนที่นิพจน์ทั่วไปอื่นแล้วมันก็กลับมา

ใช่ คุณสามารถสร้างเนื้อหาที่ทำงานร่วมกันได้โดยใช้องค์ประกอบ <details>:

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

ข้อมูลที่ครอบคลุมเกี่ยวกับแท็ก HTML นี้สามารถพบได้ใน เอกสารเว็บ MDN