如何使用Javascript检测元素的文本方向？

Question

如何使用Javascript检测HTML元素的文本方向？我期望得到"rtl"或"ltr"之一。

<div dir="ltr" id="foo">bar</div>

<div style="direction:ltr" id="baz">quux</div>

<div dir="ltr"><div id="jeez">whiz</div></div>

如何测试“foo”、“baz”或“jeez”的方向？

- chowey

Answer 1

getComputedStyle 在现代浏览器中可用（包括IE9+和其他浏览器）。

getComputedStyle(document.getElementById('foo')).direction

http://jsfiddle.net/m8Zwk/

Mozilla Developer Network关于getComputedStyle的参考资料

- Explosion Pills

Answer 2

试试这个

document.defaultView.getComputedStyle(document.getElementById('baz'),null)['direction'];

或者

style = document.defaultView.getComputedStyle(document.firstChild,null);
console.log(style.direction);

- Tamil Selvan C

---

document.defaultView.getComputedStyle和window.getComputedStyle有什么区别？ - chowey

@chowey 我不相信有这样一个东西。 - Daedalus

请参见https://dev59.com/O2sz5IYBdhLWcg3wDzwA。 - Tamil Selvan C

Answer 3

@explosion-pills的答案是正确的。我为了兼容IE做了更多的研究，得出以下结论：

function getDirection(el) {
    var dir;
    if (el.currentStyle)
        dir = el.currentStyle['direction'];
    else if (window.getComputedStyle)
        dir = getComputedStyle(el, null).getPropertyValue('direction');
    return dir;
}

这甚至可以在Firefox 3.6上运行，该浏览器要求将null作为getPropertyValue的第二个参数。

由于这提供了更多信息，我想发布它以帮助他人。

- chowey

Answer 4

你可以简单地使用style对象：

console.log(document.getElementById('baz').style.direction);

演示

请注意，DOM对象仅表示元素的内联样式，不适用于任何CSS样式表。

- Daedalus

---

这对继承的方向不起作用，比如来自上面的“jeez” div或样式表（就像你说的那样）。继承方向实际上是最常见的情况。 - chowey

@chowey，那么我相信你会想要explosion的答案。我误解了你的意思，抱歉。 - Daedalus