最近處理到網頁多語系動態切換，部分按鈕採圖檔形式(需為每個語系分別製作圖檔，愛美得多付出些代價)，因此切換語系時需變更按鈕圖檔來源，切換效果如下:
若是以前，遇到這類需求不多思索，抄起jQuery上就對了! 訂閱切換選項click事件，取得要切換語系，改變<img> src指向該語系對應的圖檔，再調整語系選項class，使已選取項目呈現不同顏色即大功告成，程式範例如下所示: 線上展示
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>按鈕圖檔切換 by JavaScript</title>
<style>
.lang-sel span {color: blue;
text-decoration: underline;
cursor: pointer;
margin-right: 3px;
}
.img-btn {margin: 3px;
box-shadow: 2px 2px 5px #ccc;
}
.img-btn:active {box-shadow: none;
}
.lang-sel span.selected {color: red;
}
</style>
</head>
<body>
<divclass='lang-sel'>
<spanclass='tw'data-lang='tw'>正體</span>
<spanclass='cn'data-lang='cn'>简体</span>
<spanclass='en'data-lang='en'>English</span>
<imgid='btn'class="img-btn"src='btn_tw.png'/>
</div>
<scripttype='text/javascript'
src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js'></script>
<script>
function switchLang(lang) {$("#btn").attr("src", "btn_" + lang + ".png");
$(".lang-sel span").removeClass("selected")
.filter("." + lang).addClass("selected");
}
switchLang("tw");$(".lang-sel span").on("click", function () {
switchLang($(this).data("lang"));
});
</script>
</body>
</html>
近幾年，見識過著名Framework(如Bootstrap、KendoUI)出神入化的CSS用法，不會作詩也會吟(惟功力仍淺，只敢說堪用)，學會修改DOM以外的其他解法。
首先，CSS可透過background: url(圖檔網址)指定背景圖，配合不同Selector則可制訂多組規則，例如:
.btn { background: url(img-a.png); }
.tw .btn { background: url(img-b.png); }
以上安排即可實現切換效果: 當.img元素被包在容器中，容器是否加上class="tw"決定了.btn的背景是img-a.png還是img-b.png。以<span class='btn'>當成按鈕，上層容器指定不同class，span的背景圖就會改變；於是，切換語系時只需改變容器class(為求簡便，我通常直接將class設在body)，其下所有相關<span>就會自動切換背景圖，達到語系切換，而已選取語系選項的變色效果也可透過類似手法完成:
.tw span.tw, .cn span.cn, .en span.en { color: red; }
除了在body addClass()外不需變更DOM， 用CSS就能一次切換按鈕圖檔及語系選項顯示，jQuery程式簡化到只剩一行: 線上展示
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>按鈕圖檔切換 by CSS</title>
<style>
.lang-sel span {color: blue;
text-decoration: underline;
cursor: pointer;
margin-right: 3px;
}
.img-btn {margin: 3px;
display: inline-block;
width: 45px;
height: 20px;
box-shadow: 2px 2px 5px #ccc;
}
.img-btn:active {box-shadow: none;
}
.tw span.tw, .cn span.cn, .en span.en {color: red;
}
.tw .img-btn {background: url(btn_tw.png);
}
.cn .img-btn {background: url(btn_cn.png);
}
.en .img-btn {background: url(btn_en.png);
}
</style>
</head>
<bodyclass="tw">
<divclass='lang-sel'>
<spanclass='tw'data-lang='tw'>正體</span>
<spanclass='cn'data-lang='cn'>简体</span>
<spanclass='en'data-lang='en'>English</span>
<spanclass="img-btn"></span>
</div>
<scripttype='text/javascript'
src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js'></script>
<script>
$(".lang-sel span").on("click", function () {
$("body").removeClass("tw cn en").addClass($(this).data("lang"));
});
</script>
</body>
</html>
改用CSS做法後，JavaScript大幅簡化，CSS卻變得較為繁瑣，一來一往，整體說來並未明顯簡潔，但仍有其意義: 關鍵在於分工不同! 圖檔切換的工作由JavaScript移至CSS，意味著苦主工作職掌由程式設計師移向視覺設計師(當然，若JS與CSS都由前端工程師統包，就只是左手移到右手，差異便不大)，圖檔變化有時還涉及尺寸變化，常需與排版設計一併考慮，在CSS裡統一協調安排較為便利，也算走CSS處理的優點之一。至於效能，CSS套用規則切換直接由瀏覽器渲染(Render)引擎處理，理應比用JavaScript逐一改變DOM屬性更有效率(尤其是要處理的DOM元素數量較多時)，只是差異也有限吧!? (未經實驗，純屬非專業猜測)
未來面對類似應用需求，又多了一種解法選項。