[已解决]为什么conslole.log打印的值不相同

李万金 · 发表于 2022-4-27 22:08:49

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由李万金于 2022-4-28 09:16 编辑

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scoped CSS Variables and JS</title>
</head>
<body>
<h2>Update CSS Variables with <span class='hl'>JS</span></h2>
<div class="controls">
<label for="spacing">Spacing:</label>
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
<label for="blur">Blur:</label>
<input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
<label for="base">Base Color</label>
<input id="base" type="color" name="base" value="#ffc600">
</div>
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
<style>
:root {
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}
img {
padding: var(--spacing);
background: var(--base);
filter: blur(var(--blur));
}
.hl {
color: var(--base);
}
/*
misc styles, nothing to do with CSS variables
*/
body {
text-align: center;
background: #193549;
color: white;
font-family: 'helvetica neue', sans-serif;
font-weight: 100;
font-size: 50px;
}
.controls {
margin-bottom: 50px;
}
input {
width: 100px;
}
</style>
<script>
let inputs = document.querySelectorAll('.controls input');
function picUpdate(){
let suffix = this.dataset.sizing || '';
console.log(this);
console.log(this.value)
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
}
inputs.forEach(input => input.addEventListener('change', picUpdate));
// inputs.forEach(input => input.addEventListener('mousemove', picUpdate));
</script>
</body>
</html>

复制代码

如上传图所示，为什么两个值不同

最佳答案

月排行榜 / 总排行榜

洋洋痒

2022-4-28 23:34:09

跳转到最佳答案楼层

洋洋痒 · 发表于 2022-4-27 23:04:04

啥代码都没有，你是指望别人掐指给你算出来吗

isdkz · 发表于 2022-4-27 23:10:58

是不是你在输入框输入了 13 ？

李万金 · 发表于 2022-4-28 09:17:20

洋洋痒发表于 2022-4-27 23:04
啥代码都没有，你是指望别人掐指给你算出来吗

才发现可以上传代码

wp231957 · 发表于 2022-4-28 10:11:11

李万金发表于 2022-4-28 09:17
才发现可以上传代码

很明显的错误，不知道咋改！！！
Uncaught TypeError: Cannot read property 'sizing' of undefined
at picUpdate (TEST4.HTML:70)
at TEST4.HTML:76
picUpdate @ TEST4.HTML:70
(anonymous) @ TEST4.HTML:76

洋洋痒 · 发表于 2022-4-28 21:07:55

本帖最后由洋洋痒于 2022-4-28 21:32 编辑

你发的代码应该是后来改过了吧？

洋洋痒 · 发表于 2022-4-28 23:06:36

用这个函数document.querySelectorAll 出来的结果挨个打印我试了试，你不管怎么变打印结果都是不变的

洋洋痒 · 发表于 2022-4-28 23:12:45

this一直都是不变的，我猜和document.querySelectorAll原理有关

洋洋痒 · 发表于 2022-4-28 23:34:09

账号		自动登录	找回密码
密码			立即注册