如何使用Javascript变量控制CSS属性值？

我正在尝试使用滑块来控制页面上文本的字体权重值

我正在尝试链接滑块的值，以控制我的

h1

an

h2

s中的

font-weight

属性

下面是我的尝试，但没有带来任何运气。我如何更好地处理这个问题？提前感谢！：）

如何使用从CSS滑块获得的值来控制

h1

和

h2

的

font-weight

var slider=document.getElementById（“myRange”）；
var输出=document.getElementById（“演示”）；
output.innerHTML=slider.value；//显示默认滑块值
//更新当前滑块值（每次拖动滑块控制柄时）
slider.oninput=函数（）{
output.innerHTML=this.value；
}

@font-face{
字体系列：“斯巴达瘦”；
src:url（'font/spartanuntc/Spartan-VariableFont_wght.ttf'）；
字体大小：100900；
字体风格：普通；
}
h1{
字体系列：“斯巴达瘦”；
字体大小：“this.value”；
}
氢{
字体系列：“斯巴达瘦”；
字号：100；
}
.slidecontainer{
宽度：100%；
/*外部容器的宽度*/
}
/*滑块本身*/
.滑块{
-webkit外观：无；
/*覆盖默认CSS样式*/
外观：无；
宽度：100%；
/*全宽*/
高度：1.5px；
/*指定高度*/
背景#d3；
/*灰色背景*/
大纲：无；
/*删除轮廓*/
不透明度：0.7；
/*设置透明度（用于鼠标悬停时的鼠标悬停效果）*/
-webkit转换：.2s；
/*悬停时的0.2秒过渡*/
转变：不透明度；
}
/*鼠标悬停效果*/
.滑块：悬停{
不透明度：1；
/*完全显示在鼠标上方*/
}
/*滑块手柄（使用-webkit-（Chrome、Opera、Safari、Edge）和-moz-（Firefox）覆盖默认外观）*/
.滑块：：-webkit滑块拇指{
-webkit外观：无；
/*覆盖默认外观*/
外观：无；
宽度：2.5px；
/*设置特定的滑块控制柄宽度*/
高度：2.5px；
/*滑块手柄高度*/
背景#4CAF50；
/*绿色背景*/
光标：指针；
/*光标悬停*/
}
.滑块：：-moz范围拇指{
宽度：25px；
/*设置特定的滑块控制柄宽度*/
高度：25px；
/*滑块手柄高度*/
背景#4CAF50；
/*绿色背景*/
光标：指针；
/*光标悬停*/
}
p{
边缘顶部：50px；
不透明度：0.7；
}

试验
ABCDEFGH
重量：

ABCDEFGH

您可以使用

el.style.fontwweight=this.value或您可以使用CSS自定义属性，如下所示：


let root=document.documentElement；
var slider=document.getElementById（“myRange”）；
var输出=document.getElementById（“演示”）；
output.innerHTML=slider.value；//显示默认滑块值
//更新当前滑块值（每次拖动滑块控制柄时）
slider.oninput=函数（）{
output.innerHTML=this.value；
//滑块更改时更新值
root.style.setProperty（'--font-weight'，this.value）；
}
/*在根目录下添加变量*/
：根{
--字号：100；
}
@字体{
字体系列：“斯巴达瘦”；
src:url（'font/spartanuntc/Spartan-VariableFont_wght.ttf'）；
字体大小：100900；
字体风格：普通；
}
h1{
字体系列：“斯巴达瘦”；
/*财产价值比*/
字体大小：var（--字体大小）；
}
氢{
字体系列：“斯巴达瘦”；
字号：100；
}
.slidecontainer{
宽度：100%；
/*外部容器的宽度*/
}
/*滑块本身*/
.滑块{
-webkit外观：无；
/*覆盖默认CSS样式*/
外观：无；
宽度：100%；
/*全宽*/
高度：1.5px；
/*指定高度*/
背景#d3；
/*灰色背景*/
大纲：无；
/*删除轮廓*/
不透明度：0.7；
/*设置透明度（用于鼠标悬停时的鼠标悬停效果）*/
-webkit转换：.2s；
/*悬停时的0.2秒过渡*/
转变：不透明度；
}
/*鼠标悬停效果*/
.滑块：悬停{
不透明度：1；
/*完全显示在鼠标上方*/
}
/*滑块手柄（使用-webkit-（Chrome、Opera、Safari、Edge）和-moz-（Firefox）覆盖默认外观）*/
.滑块：：-webkit滑块拇指{
-webkit外观：无；
/*覆盖默认外观*/
外观：无；
宽度：2.5px；
/*设置特定的滑块控制柄宽度*/
高度：2.5px；
/*滑块手柄高度*/
背景#4CAF50；
/*绿色背景*/
光标：指针；
/*光标悬停*/
}
.滑块：：-moz范围拇指{
宽度：25px；
/*设置特定的滑块控制柄宽度*/
高度：25px；
/*滑块手柄高度*/
背景#4CAF50；
/*绿色背景*/
光标：指针；
/*光标悬停*/
}

ABCDEFGH
重量：

ABCDEFGH
您可以使用
el.style.fontwweight=this.value或您可以使用CSS自定义属性，如下所示：


let root=document.documentElement；
var slider=document.getElementById（“myRange”）；
var输出=document.getElementById（“演示”）；
output.innerHTML=slider.value；//显示默认滑块值
//更新当前滑块值（每次拖动滑块控制柄时）
slider.oninput=函数（）{
output.innerHTML=this.value；
//滑块更改时更新值
root.style.setProperty（'--font-weight'，this.value）；
}
/*在根目录下添加变量*/
：根{
--字号：100；
}
@字体{
字体系列：“斯巴达瘦”；
src:url（'font/spartanuntc/Spartan-VariableFont_wght.ttf'）；
字体大小：100900；
字体风格：普通；
}
h1{
字体系列：“斯巴达瘦”；
/*财产价值比*/
字体大小：var（--字体大小）；
}
氢{
字体系列：“斯巴达瘦”；
字号：100；
}
.slidecontainer{
宽度：100%；
/*外部容器的宽度*/