javascript - 针对不同语言更改元素的 CSS

Question

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

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

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

谢谢。

Answer 1

CSS 没有执行此操作的机制，但您可以通过迭代 JavaScript 中的每个文本节点并不敏感地测试字符 AZ 来试试运气match(/^[a-z]+$/i)（尽管这并不能保证文本是英文的）。

如果为真，您可以将一个类附加到父元素，类似于appears-english然后拥有类似于.appears-english { font-size: 120% }.

更新

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

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%;  
}

js小提琴。

如果有数字，您可以从小提琴中看到它不匹配 - 您可以通过将正则表达式更改[a-z]\w为.

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