この記事の例では、js+css を使用した Web ページのスキニング効果の簡単な実装について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:
ここでは、異なるフォルダーにある同じ名前の CSS ファイルを使用して 3 つの外観が作成されています。では、js の置換読み込みを実装するにはどうすればよいでしょうか。
3 つのボタンは次のとおりです:
<a id="skin1" href="javascript:void(0)" class="easyui-linkbutton" onclick="changeCss('default')">蓝色皮肤</a><br/><br/> <a id="skin2" href="javascript:void(0)" class="easyui-linkbutton" onclick="changeCss('gray')">灰色皮肤</a><br/><br/> <a id="skin3" href="javascript:void(0)" class="easyui-linkbutton" onclick="changeCss('unite')">自定义皮肤</a>
js コード:
// 更换主题 function changeCss(cssName) { if (document.getElementsByTagName_r("link").length > 0) { for(var i = 0 ; i < document.getElementsByTagName_r("link").length; i++){ var ctrlLink = document.getElementsByTagName_r("link")[i]; var cssOld = ctrlLink.getAttribute("href"); var cssNew = cssOld.replace("default", cssName); cssNew = cssNew.replace("gray", cssName); cssNew = cssNew.replace("unite", cssName); ctrlLink.setAttribute("href", cssNew); } } }
実現効果:
この記事が JavaScript プログラミングのすべての人に役立つことを願っています。