ฉันกำลังแทนที่ CSS ของไซต์เป็นเวอร์ชัน RTL เมื่อมีการเลือกภาษาเฉพาะ
ฉันมีองค์ประกอบที่ต้องมีตำแหน่งที่แน่นอน ในเวอร์ชัน LTR ฉันทำleft: 0px;และจัดชิดซ้าย ในเวอร์ชัน RTL ฉันต้องการทำสิ่งที่ตรงกันข้ามrightแต่leftคุณสมบัติไม่ได้ถูกแทนที่ดังนั้นจึงยังคงอยู่ทางซ้าย
!importantแต่ไม่ได้ผลleft: noneแล้ว แต่ไม่ได้ผลฉันจะตั้งค่าเป็นไม่มีหรือลบออกทั้งหมดในขณะที่ลบล้างได้อย่างไร
คำตอบ:
left:auto;
ค่านี้จะเริ่มต้นleftกลับไปที่เบราว์เซอร์เริ่มต้น
ดังนั้นหากคุณมี Markup / CSS เป็น:
<div class="myClass"></div>
.myClass
{
position:absolute;
left:0;
}
เมื่อตั้งค่า RTL คุณสามารถเปลี่ยนเป็น:
<div class="myClass rtl"></div>
.myClass
{
position:absolute;
left:0;
}
.myClass.rtl
{
left:auto;
right:0;
}
ในอนาคตจะใช้left: unset;สำหรับการยกเลิกการตั้งค่าด้านซ้าย
ณ วันนี้ 4 พ.ย. 2014 unsetรองรับเฉพาะใน Firefox
อ่านเพิ่มเติมเกี่ยวกับการยกเลิกการตั้งค่าใน MDN
ฉันเดาว่าเราจะสามารถใช้งานได้ประมาณปี 2022 เมื่อ IE 11 สิ้นสุดลงอย่างเหมาะสม
rightตำแหน่งสำหรับการเปลี่ยนแปลงที่ตอบสนอง - ทำงานได้อย่างสมบูรณ์ (ใน Chrome)
left: initial
นอกจากนี้ยังจะตั้งleftกลับเป็นค่าเริ่มต้นของเบราว์เซอร์
แต่สิ่งสำคัญที่ควรทราบproperty: initialไม่รองรับใน IE
leftuse:var cssObject = $('selector').prop('style'); cssObject.removeProperty('left');