基于css完成网页的国际化

Posted yishenweilv

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于css完成网页的国际化相关的知识,希望对你有一定的参考价值。

前提

在日常处理国际化的时候,通常是将key通过类似intl.xx(key)转换为对应环境的文案,可是如果需要在css中加入对应逻辑应该怎么做呢(比如在after的伪元素中显示不同的文案),毕竟在css中没办法通过js代码将key转换为文案。

 

思路

1. 既然不能在css中写入翻译过程,那么就把翻译结果写入dom节点中,可以用data属性存放已经翻译好的文案,<div class="suf" data-suffix="翻译的结果"></div>

2. 在css中读出data-suffix的值作为content的内容, 可以使用attr()来获取指定的属性, .suf:after content: attr(data-suffix) 

以上是关于基于css完成网页的国际化的主要内容,如果未能解决你的问题,请参考以下文章

iOS- 国际化(多语言设置)

Struts2UI标签数据回显资源国际化

Struts2UI标签数据回显资源国际化

JavaScript概述

前端系列——jquery前端国际化解决方案“填坑日记”

国际化