javascript - 根据不同的语言更改元素的 CSS

Question

有没有办法根据语言使用 CSS 来设置文本样式？

例如，Tahoma 字体广泛用于阿拉伯文本，但对于具有相同文本大小的英文文本，其大小非常小。

因此，当我们在阿拉伯语文本中包含一些英文文本时，有没有一种方法可以自动检测文本语言的变化，然后为包含阿拉伯语的英文文本使用更大的字体。

谢谢。

Answer 1

CSS 没有执行此操作的机制，但您可以通过遍历 JavaScript 中的每个文本节点并不敏感地测试字符 A-Z 来试试运气(match(/^[a-z]+$/i)(尽管这不能保证文本将是 < em>英语).

如果为 true，您可以将一个类附加到父元素，类似于 appears-english然后像 .appears-english { font-size: 120% } 这样的 CSS .

更新

根据要求，这里有一些代码......

JavaScript

var divs = document.getElementsByTagName('div');

for (var i = 0, divsLength = divs.length; i < divsLength; i++) {
  var div = divs[i];

    if (div.firstChild.nodeValue.match(/^[a-z]+$/)) {
       div.className += 'appears-english';
    }  

}

CSS

.appears-english {
   font-size: 170%;  
}

jsFiddle .

你可以从fiddle中看到如果有数字它就不匹配——你可以通过changing [a-z] in the regex to \w 让它匹配数字、字母和下划线| .

顺便说一句，如果你想更新一个包含阿拉伯字符的元素中的英文字符，你需要使用replace()。并用 span 包裹它们元素，然后添加 appears-english到。