html - How to detect text direction of element using Javascript? - Stack Overflow

admin管理员组

文章数量:1202781

What's the best way to detect the text direction of an html element using Javascript? I would expect to get either "rtl" or "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>

How would I test for the direction on "foo", "baz" or "jeez"?

What's the best way to detect the text direction of an html element using Javascript? I would expect to get either "rtl" or "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>

How would I test for the direction on "foo", "baz" or "jeez"?

• javascript
• html
• right-to-left

Share Improve this question Follow edited Jun 5, 2013 at 12:26 j0k 22.8k2828 gold badges8181 silver badges9090 bronze badges asked Mar 31, 2013 at 3:19 choweychowey 9,82666 gold badges5757 silver badges8686 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 24

getComputedStyle is available in modern browsers (IE9+ and the others). Use it like this:

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

Here's a full example:

for (let id of ["foo", "baz", "jeez", "hello"]) {
  console.log(id, getComputedStyle(document.getElementById(id)).direction);
}

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

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

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

<div dir="auto" id="hello">hello</div>

Try this

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

OR

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

@explosion-pills answer is correct. I did some more research for IE compatibility and came up with the following:

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

This should even work on Firefox 3.6 which requires null as the second parameter to getPropertyValue.

Since this gives more information I thought I would post it in case it helps someone.

本文标签： htmlHow to detect text direction of element using JavascriptStack Overflow