码迷,mamicode.com
首页 > Web开发 > 详细

css tips —— 在css中完成国际化

时间:2018-10-12 17:03:59      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:dom   css   Fix   过程   不同   data   日常   key   js代码   

前提

在日常处理国际化的时候,通常是将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 tips —— 在css中完成国际化

标签:dom   css   Fix   过程   不同   data   日常   key   js代码   

原文地址:https://www.cnblogs.com/nanchen/p/9778878.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!