รีเซ็ตคุณสมบัติการแสดง CSS เป็นค่าเริ่มต้น

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

หรือเป็นวิธีเดียวที่จะค้นหาว่าค่าเริ่มต้นขององค์ประกอบนั้นคืออะไรแล้วตั้งค่าเป็น? ไม่ต้องการที่จะรู้ว่าองค์ประกอบนั้นมักจะถูกบล็อก, อินไลน์หรืออะไรก็ตาม ...

รูปแบบเริ่มต้นของเบราว์เซอร์ที่กำหนดไว้ในสไตล์ชีตตัวแทนผู้ใช้ของแหล่งที่มาของการที่คุณสามารถหาได้ที่นี่ น่าเสียดายที่ข้อมูลจำเพาะ Cascading และ Inheritance ระดับ 3ไม่ปรากฏขึ้นเพื่อเสนอวิธีการรีเซ็ตคุณสมบัติสไตล์เป็นเบราว์เซอร์เริ่มต้น อย่างไรก็ตามมีแผนการที่จะรื้อฟื้นคำหลักสำหรับสิ่งนี้ในระดับล่างและระดับสืบทอด 4 - คณะทำงานก็ยังไม่ได้ตัดสินชื่อของคำหลักนี้ (ลิงค์บอกว่าในตอนนี้revertแต่มันยังไม่เป็นที่สิ้นสุด) ข้อมูลเกี่ยวกับการสนับสนุนเบราว์เซอร์revertสามารถพบได้บนcaniuse.com

ในขณะที่ระดับ 3 สเปคไม่แนะนำinitialคำหลัก , การตั้งค่าคุณสมบัติที่จะของค่าเริ่มต้นการตั้งค่าใหม่เป็นค่าเริ่มต้นตามที่กำหนดโดย CSS , ไม่ได้ตามที่กำหนดโดยเบราว์เซอร์ ค่าเริ่มต้นของdisplayคือinline; นี้จะถูกระบุที่นี่ initialคำหลักหมายถึงค่าที่ไม่ได้เริ่มต้นเบราว์เซอร์ ข้อมูลจำเพาะของตัวเองทำให้บันทึกย่อนี้ภายใต้allคุณสมบัติ :

ตัวอย่างเช่นหากผู้เขียนระบุall: initialในองค์ประกอบมันจะปิดกั้นการสืบทอดทั้งหมดและรีเซ็ตคุณสมบัติทั้งหมดราวกับว่าไม่มีกฎปรากฏในระดับผู้เขียนผู้ใช้หรือตัวแทนผู้ใช้ของน้ำตกทั้งหมด

สิ่งนี้มีประโยชน์สำหรับองค์ประกอบรูทของ "วิดเจ็ต" ที่รวมอยู่ในหน้าซึ่งไม่ต้องการรับลักษณะของหน้านอก อย่างไรก็ตามโปรดทราบว่าสไตล์ "เริ่มต้น" ใด ๆ ที่ใช้กับองค์ประกอบนั้น (เช่นdisplay: blockจากสไตล์ชีต UA ในองค์ประกอบบล็อกเช่น<div>) จะถูกพัดหายไป

ดังนั้นฉันเดาวิธีเดียวที่ตอนนี้โดยใช้ CSS บริสุทธิ์คือค้นหาค่าเริ่มต้นของเบราว์เซอร์และตั้งค่าด้วยตนเอง:

div.foo { display: inline-block; }
div.foo.bar { display: block; }

(ทางเลือกข้างต้นจะเป็นdiv.foo:not(.bar) { display: inline-block; }แต่ที่เกี่ยวข้องกับการปรับเปลี่ยนตัวเลือกเดิมมากกว่าการแทนที่)

หากอนุญาตให้ใช้จาวาสคริปต์คุณสามารถตั้งค่าdisplayคุณสมบัติเป็นสตริงว่าง สิ่งนี้จะทำให้มันใช้ค่าเริ่มต้นสำหรับองค์ประกอบนั้น

var element = document.querySelector('span.selector');

// Set display to empty string to use default for that element
element.style.display = '';

นี่คือการเชื่อมโยงไปยังjsbin

นี้เป็นสิ่งที่ดีเพราะคุณจะได้ไม่ต้องกังวลเกี่ยวกับประเภทที่แตกต่างกันของการแสดงผลจะกลับไป ( block, inline, inline-block, table-cellฯลฯ )

แต่มันต้องมีจาวาสคริปต์ดังนั้นหากคุณกำลังมองหาโซลูชัน css-only นี่ไม่ใช่วิธีแก้ปัญหาสำหรับคุณ

หมายเหตุ: สิ่งนี้จะแทนที่สไตล์อินไลน์ แต่ไม่ได้กำหนดสไตล์ไว้ใน css

ไม่ได้ตั้งค่าdisplay:

คุณสามารถใช้ค่าunsetที่ทำงานทั้งในFirefox และ Chrome

display: unset;

.foo     { display: none;  }
.foo.bar { display: unset; }

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

แน่นอนว่าเป็นไปได้ที่จะตั้งค่าคุณสมบัติที่คุณคาดว่าจะเป็นค่าเริ่มต้น สิ่งนี้อาจใช้งานได้อย่างกว้างขวางหากคุณตรวจสอบส่วนการแสดงผลของ HTML5 CR ส่วนใหญ่จะสะท้อนสิ่งที่เบราว์เซอร์ทำจริง

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

หากคุณมีสิทธิ์เข้าถึงJavaScriptคุณสามารถสร้างองค์ประกอบและอ่านสไตล์ที่คำนวณได้

function defaultValueOfCssPropertyForElement(cssPropertyName, elementTagName, opt_pseudoElement) {
    var pseudoElement = opt_pseudoElement || null;
    var element = document.createElement(elementTagName);
    document.body.appendChild(element);
    var computedStyle = getComputedStyle(element, pseudoElement)[cssPropertyName];
    element.remove();
    return computedStyle;
}

// Usage:
defaultValueOfCssPropertyForElement('display', 'div'); // Output: 'block'
defaultValueOfCssPropertyForElement('content', 'div', ':after'); // Output: 'none'

เกี่ยวกับคำตอบโดย BoltClock และ John ฉันเองมีปัญหากับคำหลักเริ่มต้นเมื่อใช้ IE11 มันทำงานได้ดีใน Chrome แต่ใน IE ดูเหมือนว่าจะไม่มีผลกระทบ

ตามคำตอบนี้ IE ไม่รองรับคำค้นหาเริ่มต้น: Div display: initial ไม่ทำงานอย่างที่ตั้งใจไว้ใน ie10 และ chrome 29

ฉันลองตั้งค่ามันว่างเปล่าแทนตามที่แนะนำไว้ที่นี่: วิธีเปลี่ยนกลับเป็นปกติหลังจากแสดง: ไม่มีสำหรับแถวของตาราง

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