Maison > interface Web > js tutoriel > js css implémentation simple des compétences d'effet de skinning de page Web_javascript

js css implémentation simple des compétences d'effet de skinning de page Web_javascript

WBOY
Libérer: 2016-05-16 15:22:56
original
1759 Les gens l'ont consulté

L'exemple de cet article décrit la mise en œuvre simple de l'effet de skinning de page Web à l'aide de js css. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Trois ensembles d'apparences sont créés ici, en utilisant des fichiers CSS du même nom dans différents dossiers. Alors, comment implémenter le chargement de remplacement js ?

Les 3 boutons sont les suivants :

<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>

Copier après la connexion

code 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);
   }
  }
}

Copier après la connexion

Effet de réalisation :

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal