网页设计 切换 第1篇
方式4:link标签动态引入
扫码加入前端交流群,期待你的加入!
CSS媒体查询是实现响应式网页设计的重要工具,它允许根据设备的特定特性来应用不同的样式规则。
使用 @media
规则可以实现这一功能,通过这个规则可以定义一个或多个条件,当这些条件满足时,相应的样式代码块将会被应用到文档上。例如,在屏幕宽度小于或等于768像素时,背景颜色可以设置为浅蓝色
CSS媒体查询还可以检测用户是否有将系统的主题色设置为两色或者暗色
这种方式的确可以实现主题跟随系统的变换而变换,但是存在以下缺点:
增加工作量:开发者需要编写更多的CSS代码,这可能会导致工作效率降低
加载时间延长:随着CSS代码量的增加,页面的加载时间可能会变长,尤其是对于那些包含大量媒体查询的复杂样式表
用户无法自定义:样式固定,用户无法自定义设置主题样式
JS同样拥有媒体查询的方法 matchMedia()。传入一个被用于媒体查询解析的字符串,返回一个用来媒体查询新的 MediaQueryList 对象,其中的 matchs 属性值就是匹配结果。
同样的也可以用来查询系统是否使用了暗色主题
接下来就采用上面方式1的主题切换方案,结合JS媒体查询来实现跟随系统主题切换的功能。
现在还有一个问题,如果页面已经打开的情况下,再去修改系统主题,是否能检测到系统主题的变化,使得网页在不刷新的情况下自动切换。
答案是可以的,可以通过监听 MediaQueryList
的 change
事件,当 matches
的值发生变化时会触发。
利用媒体查询还可以检测很多内容,比如:浏览器可视区域尺寸、设备尺寸、设备目前处于横向还是纵向、检测设备宽高比、设备颜色位数等
【前端筱园交流群】已经正式开通啦!在这里,你可以与一群志同道合的小伙伴们交流、分享、学习、共同成长,扫码加入,期待你的加入! 关注我的公众号【
网页设计 切换 第2篇
1. 我们需要先把所有内容区域都隐藏,所以我们使用for循环来写。
2. 把所有内容区域div的class名去掉就可以了。
3. 把当前索引对应的内容区域展示出来,只需要把class名active加上就可了,active的样式我们在上面已经写过了。
代码如下:
//隐藏所有内容区域。
for(varj=0;j<ocon.length;j++){
ocon[j].className='';
//当前索引对应的内容展示出来。
ocon[this.index].className='active';
网页设计 切换 第3篇
我们发现按钮的长度()和内容的长度()是一样的,上面我们是用两个for循环来写,其实我们可以把代码优化下,改成用一个for循环就可以了。代码如下:
for(varj=0;j<obtn.length;j++){
// 去掉所有按钮的class名。
obtn[j].className=__;
//隐藏所有内容区域。
ocon[j].className='';
网页设计 切换 第4篇
<html>
<head>
<metacharset=_UTF-8_>
<title>tab切换title>
<style>
.on{
/* 让class名是on的元素,文字变成红色 */
color:red;
#con div{
width:200px;
height:200px;
border:10px solid orange;
/* 让内容区域都隐藏起来 */
display:none;
#con .active{
/* 让class名是active的元素显示出来 */
display:block;
style>
head>
<body>
<divid=_btn_>
<buttonclass=_on_>标题1button>
<button>标题2button>
<button>标题3button>
div>
<divid=_con_>
<divclass=_active_>内容1div>
<div>内容2div>
<div>内容3div>
div>
<script>
//获取到id名是btn的元素。
varbtn=document.getElementById(_btn_);
//获取到btn里面标签名是button的元素,也就是获取到3个按钮。
varobtn=btn.getElementsByTagName(_button_);
//获取到id名是con的元素。
varcon=document.getElementById(_con_);
//获取到con里面标签名是div的元素,也就是获取到3个内容。
varocon=con.getElementsByTagName(_div_);
for(vari=0;i<obtn.length;i++){
//给每个按钮定义了一个index属性,这个index是属于obtn[i]的属性和方法。
obtn[i].index=i;