网页前端 网页换肤(js)

网页换肤原理:需要准备不同的肤色的css的样式表,
涉及到:
点击事件(onclick)
οnclick= “onmouseover”、……move、……out这些方法。
这些方法方别是鼠标的不同的操作方。

id属性,所有的都可以有id属性。
所以:要求准备:
1、需要哪些样式,点击之后会改变href
2、需要的属性添加事件,切换

js
fucntion 是函数的关键字
·js中的函数赋值:可以匿名函数和之间赋值函数

window.onload()
这个是加载网页的方法,我们是可以通过写这个方法,才会调用下面的属性,因为,js的原因是一行一行的代码进行执行的。
所以要先将页面的所有对象或者属性加载了之后才可以使用。
所以这个方法在页面上会经常用到 。

document.getElementById()这个方法来获取相关的网页属性,也就是通过Id这个属性两获取的,通过方法的名称我们就可以知道了这个方法的含义。
属性 操作:
1、obj.style.display = @”block”;对块进行操作
2、赋值
3、引用样式,id都会是名称一致
(特殊:class 在引用的时候为className)
obj.className = “类的样式”;

附加:
sublime中:
快捷键:
ctrl+Y 和ctrl+z的使用,他们朝着相反的方向显示效果。

总结:这些前端的知识点和ios中的UI几乎是一样的,没有太大的区别。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现静态网页一键换肤的方法主要是利用JavaScript动态修改CSS样式表中的样式,从而达到切皮肤的效果。 下面给出一个简单的实现示例: HTML代码: ```html <!DOCTYPE html> <html> <head> <title>一键换肤示例</title> <link rel="stylesheet" type="text/css" href="style.css" id="skin"> <script type="text/javascript" src="skin.js"></script> </head> <body> <div class="container"> <h1>一键换肤示例</h1> <p>这是一个静态网页,支持一键换肤。</p> <button onclick="changeSkin('blue')">蓝色</button> <button onclick="changeSkin('green')">绿色</button> <button onclick="changeSkin('yellow')">黄色</button> </div> </body> </html> ``` CSS代码: ```css .container { width: 500px; margin: 0 auto; padding: 20px; background-color: #f0f0f0; } h1 { font-size: 36px; color: #333; } p { font-size: 18px; color: #666; line-height: 1.8; } .blue { background-color: #0077be; color: #fff; } .green { background-color: #00b300; color: #fff; } .yellow { background-color: #ffd700; color: #333; } ``` JavaScript代码: ```javascript function changeSkin(skin) { var css = document.getElementById('skin'); css.href = 'skin-' + skin + '.css'; } ``` 在这个示例中,我们在HTML代码中加入了三个按钮,分别代表不同的皮肤。当用户点击按钮时,会触发changeSkin函数,该函数通过修改CSS样式表中的href属性,来加载不同的皮肤CSS文件。这些皮肤CSS文件需要事先定义好,并通过不同的类名来实现样式的不同。 需要注意的是,在修改href属性时,需要保证新的CSS文件已经加载完成,否则可能会出现样式混乱的情况。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值