javascript - JS 网页换肤之问题
问题描述
<link href='https://www.haobala.com/wenda/green.css' rel='stylesheet' type='text/css' />
window.onload = function (){ var oLink = document.getElementsByTagName('link')[0]; var oSkin = document.getElementById('skin').getElementsByTagName('li');for(var i = 0; i< oSkin.length; i++) {oSkin[i].onclick = function (){ for(var p in oSkin) oSkin[p].className = ''; this.className = 'current'; oLink[’href’] = this.id + '.css';}} };
<body><p id='outer'> <ul id='skin'><li >红</li><li >绿</li><li >黑</li> </ul> <ul id='nav'><li><a href='javascript:;'>新闻</a></li><li><a href='javascript:;'>娱乐</a></li><li><a href='javascript:;'>体育</a></li><li><a href='javascript:;'>电影</a></li><li><a href='javascript:;'>音乐</a></li><li class='last'><a href='javascript:;'>旅游</a></li> </ul></p></body>
this.className = 'current'表示什么？ 是对应当前页面是绿色状态下的按钮吗
问题解答
回答1：this.className = 'current'; 将当前被点击的那个<li> 的class 设为 current，达到动态更改标签样式的目的
回答2：.css 应该是一个样式文件，通过id来载入指定的皮肤样式。
link 是一个 html element，用来载入资源的。
回答3：一般来说，换肤的话会涉及到很多CSS。我一般都会把外联的CSS换掉来做这个功能。假设我现在有一个HTML文件和两个HTML皮肤（就是俩CSS文件，一红一黄）。简单的代码如下<!DOCTYPE html><html><head>
<meta charset='utf-8'><title>test</title><link rel='stylesheet' href='https://www.haobala.com/wenda/red.css'>
</head><body>
<button id='red'>red</button><button id='yellow'>yellow</button><script> var css = document.getElementById('css'); var red = document.getElementById('red'); var yellow = document.getElementById('yellow'); red.onclick = function () {css.href = 'https://www.haobala.com/wenda/red.css'; }; yellow.onclick = function () {css.href = 'https://www.haobala.com/wenda/yellow.css'; };</script>
</body></html>大概就是这个感觉
回答4：你这个代码应该没完，他这个代码的意思估计是修改皮肤，动态加载css样式。
相关文章：
1. angular.js - angularjs的自定义过滤器如何给文字加颜色？2. docker安装后出现Cannot connect to the Docker daemon.3. android - 启动模拟器的，报“Could not automatically detect an ADB binary……”，要怎么解决？4. python - TypeError: tryMsgcode() takes exactly 2 arguments (0 given)5. 关于Java引用传递的一个困惑？6. 如何分别在Windows下用Winform项模板+C#，在MacOSX下用Cocos Application项目模板+Objective-C实现一个制作游戏的空的黑窗口？7. 关于docker下的nginx压力测试8. android clickablespan获取选中内容9. javascript - 最终生成的jsBundle文件压缩问题10. node.js - 如何在服务器部署vuejs项目？
网公网安备