改进Javascript中增加字体大小的代码_Javascript_Html_Css

改进Javascript中增加字体大小的代码

javascript html css

改进Javascript中增加字体大小的代码,javascript,html,css,Javascript,Html,Css,我正在开发一个增加/减少页面字体大小的功能。导航栏的字体大小不能超过19px，其余内容的字体大小不能超过50px；在减量的情况下，navbar的字体大小不能减小到当前大小以下，其余的字体大小不能小于20px。我只为页面内容编写了代码（正在运行）。我需要帮助完成它的导航栏和改进代码下面是HTML、CSS和JS代码- function inc（）{ var el=document.getElementById（'test'）； var style=window.getComputedStyle

我正在开发一个增加/减少页面字体大小的功能。导航栏的字体大小不能超过19px，其余内容的字体大小不能超过50px；在减量的情况下，navbar的字体大小不能减小到当前大小以下，其余的字体大小不能小于20px。我只为页面内容编写了代码（正在运行）。我需要帮助完成它的导航栏和改进代码

下面是HTML、CSS和JS代码-

function inc（）{
var el=document.getElementById（'test'）；
var style=window.getComputedStyle（el，null）.getPropertyValue（'font-size'）；
var fontSize=parseFloat（样式）；
console.log（“大小”，字体大小）
如果（fontSize=20）{
el.style.fontSize=（fontSize-2）+“px”；
console.log（“decSize”，el.style.fontSize）
}
}

/*基本样式*/
* {
框大小：边框框；
填充：0；
保证金：0；
}
导航{
背景：#001a33；
}
.导航栏导航.导航链接{
颜色：白色；
字体大小：12.8px；
}
.导航栏导航.导航链接：悬停{
颜色：#91d5f3；
文字装饰：无；
}
.子菜单{
颜色：白色；
垫面：0.5雷姆；
字体大小：0.9rem；
}
.子菜单选择{
字体大小：16px；
}















子菜单：
选择1
选择2

增加
减少
字体更改

试试这个

在页面上创建具有相应最小和最大大小的项目数组

有一个功能决定是增加还是减少（干燥）

在阵列上循环

注意：我将nav的字体大小移动到nav容器中

注意：我没有在IE8中测试过这个。支持低于IE11的任何东西都是不可行的

var项目=[{
“el”：“nav”，
“最大尺寸”：30，
“minSize”：12.8
}, {
“el”：“测试”，
“最大尺寸”：50，
“minSize”：20
}]
var incdec=函数（dir）{
items.forEach（功能（项目）{
大小（目录，项目）
});
};
变量大小=函数（目录，项目）{
var el=document.querySelector（item.el）；
var max=item.maxSize；
var min=item.minSize；
console.log（dir、min、max）
var style=window.getComputedStyle（el，null）.getPropertyValue（'font-size'）；
var fontSize=parseFloat（样式）；
如果（dir==1&&fontSize=min）{
el.style.fontSize=（fontSize-2）+“px”；
console.log（“decSize”，el.tagName，el.style.fontSize）
}
}

/*基本样式*/
* {
框大小：边框框；
填充：0；
保证金：0；
}
导航{
背景：#001a33；
字体大小：12.8px；
}
.导航栏导航.导航链接{
颜色：白色；
}
.导航栏导航.导航链接：悬停{
颜色：#91d5f3；
文字装饰：无；
}
.子菜单{
颜色：白色；
垫面：0.5雷姆；
字体大小：0.9rem；
}
.子菜单选择{
字体大小：16px；
}















子菜单：
选择1
选择2

增加
减少
字体更改