英文:
input type="color" that changes color of element
问题
我正在开发一个弹出式扩展程序，用于更改 <div> 元素的颜色。这是我尝试过的内容：
JSON
{
"manifest_version": 2,
"name": "div color",
"version": "1.0",
"description": "Changes color of div",
"icons": {
"48": "icon.png"
},
"permissions": [
"activeTab"
],
"browser_action": {
"default_icon": "icon",
"default_title": "div",
"default_popup": "popup.html"
}
}
Popup
<html>
<head><script src="popup.js"></script></head>
<body>
<input type="color" id="pickcolor">
</body>
</html>
我不太清楚如何编写 JavaScript 部分。
英文:
I'm working on a popup extension that changes color of a div element. This is what I tried:
JSON
{
"manifest_version": 2,
"name": "div color",
"version": "1.0",
"description": "Changes color of div",
"icons": {
"48": "icon.png"
},
"permissions": [
"activeTab"
],
"browser_action": {
"default_icon": "icon",
"default_title": "div",
"default_popup": "popup.html"
},
}
Popup
<html>
<head><script src="popup.js"></script></head>
<body>
<input type="color" id="pickcolor">
</body>
</html>
I don't really know what to do for javascript.
答案1
得分: 1
你可以添加一个像下面这样的onchange事件：
<input type="color" id="pickcolor" onchange="changeColor(this.value)"/>
将这个函数添加到你的JavaScript中：
function changeColor(c) {
document.getElementById("elementId").style.backgroundColor = c;
}
其中"elementId"是你想要改变颜色的div的ID，这样应该可以工作。请注意，你只能通过这种方式更改弹出窗口中元素的颜色。如果你想要改变网页上某个div的样式，你需要创建一个内容脚本。
英文:
You can add an onchange-event like
<input type="color" id="pickcolor" onchange="changeColor(this.value)"/>
Add this function to your JavaScript:
function changeColor(c) {
document.getElementById("elementId").style.backgroundColor = c;
}
where "elementId" is the ID of the div you want to change colors and it should work. Note that you can only change the color of an element in your popup this way. If you want to change the style of a div on the website, you need to create a Content Script.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论