如何解决如何使多个范围滑块更改不同文本的 CSS?
我尝试制作一个带有多个段落的可变字体滑块,并且滑块一次仅更改一个段落。我找到了一个解决方案,它可以很好地处理一个文本,但我无法将它相乘以在同一页面上使用 10 次。
如果我尝试将 html 代码和 css 相乘,我将无法让它工作。当然,我也尝试使用不同的 ID 或更改样式名称,如 text-1、text-2 等。请你帮助我好吗?我吓到了。谢谢!!
const container = document.querySelector(".container");
const sliders = document.querySelectorAll(".slider");
const sliderValues = document.querySelectorAll(".output");
const buttons = document.querySelectorAll(".button");
// Display property values
for (let i = 0; i < sliders.length; i++) {
sliderValues[i].innerHTML = sliders[i].value;
}
// Update text property and displayed property value for each slider
sliders.forEach(slider => {
const sliderIndex = slider.getAttribute("data-index");
const output = document.querySelector(`.output[data-index="${sliderIndex}"]`);
slider.oninput = function() {
container.style.setProperty(`--${this.id}`,this.value);
output.innerHTML = this.value;
};
});
// Reset text property and update display property value for each slider
buttons.forEach(button => {
const buttonIndex = button.getAttribute("data-index");
const resetOutput = document.querySelector(
`.output[data-index="${buttonIndex}"]`
);
const resetSlider = document.querySelector(
`.slider[data-index="${buttonIndex}"]`
);
button.onclick = function() {
container.style.removeProperty(`--${resetSlider.id}`);
resetOutput.innerHTML = resetSlider.defaultValue;
resetSlider.value = resetSlider.defaultValue;
console.log(resetSlider.defaultValue);
};
});
/* Load the variable font */
@font-face {
font-family: 'Roboto VF';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/Roboto-VF.woff2') format('woff2-variations');
font-stretch: 75% 100%;
font-style: oblique 0deg 12deg;
font-weight: 100 900;
}
:root {
--text-weight: 500;
--text-width: 100;
--text-slant: 0;
}
html {
box-sizing: border-box;
}
*,*:before,*:after {
box-sizing: inherit;
}
body {
margin: 0;
}
.container {
font-family: "Roboto VF","Roboto",sans-serif;
margin: 0 auto;
max-width: 60rem;
padding: 3rem;
text-align: center;
}
.demo-text {
font-size: 5rem;
font-stretch: var(--text-width);
font-style: oblique var(--text-slant);
font-weight: var(--text-weight);
font-variation-settings: "wght" var(--text-weight),"wdth" var(--text-width),"slnt" var(--text-slant);
margin: 0;
}
.controls {
margin-top: 3rem;
}
.slider-container:not(:first-child) {
margin-top: 3rem;
}
.slider-controls {
display: flex;
justify-content: space-between;
margin-top: 1rem;
}
.slider-label {
font-size: 1.25rem;
font-style: normal;
font-variation-settings: "slnt" var(--text-slant);
font-weight: 650;
}
.output {
font-style: normal;
font-variation-settings: "slnt" var(--text-slant);
font-weight: 400;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 1rem;
border-radius: .25rem;
background: #dee7ec;
outline: none;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
background: #456bd9;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
background: #456bd9;
cursor: pointer;
}
.slider::-webkit-slider-thumb:active {
cursor: -webkit-grabbing;
}
.slider::-moz-range-thumb:active {
cursor: -moz-grabbing;
}
.button {
background: #fff;
border: 3px solid #dee7ec;
border-radius: 6px;
cursor: pointer;
font-size: 1rem;
font-weight: 400;
opacity: 1;
padding: .25rem .75rem;
transition: background ease-in .2s;
}
.button:hover,.button:focus {
background: #eaf0f3;
}
<main class="container">
<div>
<h1 class="demo-text">Hello</h1>
</div>
<div class="controls">
<!-- Weight Controls -->
<div class="slider-container">
<input type="range" min="100" max="900" value="500" class="slider" id="text-weight" name="text-weight" data-index="0">
<div class="slider-controls">
<label for="text-weight" class="slider-label">
Weight: <span class="output" data-index="0"></span>
</label>
<button class="button" data-index="0">
Reset
</button>
</div>
</div>
<!-- Width Controls -->
<div class="slider-container">
<input type="range" min="75" max="100" value="100" class="slider" id="text-width" name="text-width" data-index="1">
<div class="slider-controls">
<label for="text-width" class="slider-label">
Width: <span class="output" data-index="1"></span>
</label>
<button class="button" data-index="1">
Reset
</button>
</div>
</div>
<!-- Slant Controls -->
<div class="slider-container">
<input type="range" min="0" max="12" value="0" class="slider" id="text-slant" name="text-slant" data-index="2">
<div class="slider-controls">
<label for="text-slant" class="slider-label">
Slant: <span class="output" data-index="2"></span>
</label>
<button class="button" data-index="2">
Reset
</button>
</div>
</div>
</div>
</main>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。