根据不同的多语言环境来切换不同的页面样式的具体示例
//页面展示文字有时显示不同的语言时,相同的样式可能会有不同的展现,比如中文显示正常,英文因为比较长导致显示错位等情况,这时候就可以根据语言环境来动态的切换样式,实现如下:
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body .t { font-size: 16px; color: red; } body[lang="en-us"] .t { font-size: 20px; font-weight: bold; color: #000000; } </style> <script type="text/javascript"> window.onload = function () { document.getElementById('a').onchange = function () { document.getElementsByTagName('body')[0].setAttribute('lang', this.value); } } </script> </head> <body lang="en-us"> <select id="a"> <option value="en-us">英文</option> <option value="zh-cn">中文</option> </select> <div class="t"> ABC </div> </body> </html> 也可以整个HTML代码根据下面的lang="en"属性进行判断,再给不同的样式 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head></head> <body></body> </html> 样式如: /*英文语言环境时的专属样式----begin*/ html:lang(en-US) .stepDesc { width: 110px; } html:lang(en-US) .swMain ul.anchor li a .stepNumber { position: relative; float: left; width: 20px; text-align: center; padding: 0 2px 2px; font: bold 26px Verdana, Arial, Helvetica, sans-serif; } html:lang(en-US) .swMain ul.anchor li a .stepDesc { font-size: 14px; padding: 0; padding-top: 2px; line-height: 16px; font-weight: normal; } /*英文语言环境时的专属样式----end*/