英文:
How can I use TailwindCSS to dynamically update an element's color value?
问题
I understand your request. Here is the translated content:
我有一个网站，在这个网站上，我希望用户能够使用TailwindCSS动态更新一个div的颜色。但是，当我添加一个class时，似乎Tailwind并没有反映出这个改变。
请注意，尽管提供的示例在这里可以工作，但并不反映出一个正确安装了Tailwind依赖的真实行为。这是因为Tailwind的（按照说明安装）class是在编译时定义的，而CDN是在运行时构建的。基本上，CDN会在DOM中的每一次改变时更新，而Tailwind的“prod”是根据对html/js/css文件的简单分析创建的。
我选择包含CDN版本。这是因为它包含了我应用程序所需的行为，并且是我唯一能够包含的版本。如果你想重现问题的行为，只需将代码复制到一个普通的Tailwinds安装项目中，并且删除<script src="https://cdn.tailwindcss.com"></script>这一行。
<!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-js -->
document.querySelector("button").addEventListener("click", function() {
const colorValue = document.querySelector("input").value;
const div = document.querySelector("div");
div.classList.remove("bg-[#864b4b]");
div.classList.add(`bg-[${colorValue}]`);
});
<!-- 语言: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>示例问题</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="ml-4 h-96">
<label for="color-pick" class="block font-extrabold text-slate-800">选择一个颜色</label>;
<input type="color" class="mb-4" name="color-pick" id="color-pick" />;
<button
type="button"
class="block text-slate-100 font-bold bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 rounded-lg text-sm px-5 py-2.5 mr-2 mb-2"
>
将div改为所选颜色
</button>;
<div class="w-20 h-20 bg-[#864b4b]"></div>
</body>
</html>
<!-- 结束代码片段 -->
在我看来，唯一的方法是通过使用style属性编辑元素的样式。然而，如果有一种Tailwind的方法来做到这一点，那可能会更合适。
英文:
I have a website where I want a user to be able to update a div's color dynamically using TailwindCSS. However, when I add a class, it seems that Tailwind does not reflect the change.
Please note that the example provided, although it does work here, does not reflect the true behavior of a properly installed Tailwind dependency. This is because Tailwind's (as installed per instructions) classes are defined at compile time, while the cdn is built at runtime. Basically, the CDN is updated for every change in the DOM, while Tailwinds "prod" is created based on a simple analysis of the html/js/css files.
I've elected to include the CDN version. This is included here because it contains the desired behaviour for my application, and is the only version I can include. If you'd like to reproduce the problem behavior, simply copy the code into a normal Tailwinds installation project and edit out the <script src="https://cdn.tailwindcss.com"></script> line.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
document.querySelector("button").addEventListener("click", function() {
const colorValue = document.querySelector("input").value;
const div = document.querySelector("div");
div.classList.remove("bg-[#864b4b]");
div.classList.add(`bg-[${colorValue}]`);
});
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example issue</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="ml-4 h-96">
<label for="color-pick" class="block font-extrabold text-slate-800">Pick a color</label
>
<input type="color" class="mb-4" name="color-pick" id="color-pick" />
<button
type="button"
class="block text-slate-100 font-bold bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 rounded-lg text-sm px-5 py-2.5 mr-2 mb-2"
>
Change div to chosen color
</button>
<div class="w-20 h-20 bg-[#864b4b]"></div>
</body>
</html>
<!-- end snippet -->
In my opinion, the only this can be done is by editing the style of the element by using the style attribute. However, if there is a Tailwinds way to do it, it would probably be more appropriate.
答案1
得分: 0
考虑使用style属性：
document.querySelector("button").addEventListener("click", function() {
const colorValue = document.querySelector("input").value;
const div = document.querySelector("div");
div.classList.remove("bg-[#864b4b]");
div.style.backgroundColor = colorValue;
});
英文:
Consider using the style attribute:
document.querySelector("button").addEventListener("click", function() {
const colorValue = document.querySelector("input").value;
const div = document.querySelector("div");
div.classList.remove("bg-[#864b4b]");
div.style.backgroundColor = colorValue;
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论