使用从右到左的语言时，有没有办法切换左右 css 值？

Question

我在一个支持许多不同语言环境的网站上工作。我们的下一个语言环境是希伯来语，这是一种从右到左的语言。我在 HTML 元素上设置了 dir=rtl 和 lang=he，某些事情发生了变化（它们应该如此）。

很多网站使用绝对定位元素设置左值。有没有办法让它在 rtl 模式下将其切换为正确的值？

我知道我可以在我的 html 元素上有一个 rtl class 并在 class 存在时执行 css 覆盖，但是项目非常大，手动查找所有这些事件不会很有趣。

Answer 1

我认为添加 类 会更稳健，但考虑到这会带来多少无趣，用 JavaScript 来追捕他们！

Codepen

$(document).ready(function () {
  var elsToFlip = $('*')
  elsToFlip.each(function () {
    var pos = $(this).css('position')
      , left = $(this).css('left')

    if (pos === 'absolute' && left !== 'auto') {
      $(this).css({
        left: 'initial'
      , right: left
      })
    }
  })
})