首页 > 解决方案 > 输入改变元素颜色的 type="color"

问题描述

我正在开发一个改变 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"
  },

}

弹出

<html>
<head><script src="popup.js"></script></head>
<body>
<input type="color" id="pickcolor">
</body>
</html>

我真的不知道该怎么做javascript。

标签: javahtmlfirefox-addon

解决方案


您可以添加一个 onchange-event 像

<input type="color" id="pickcolor" onchange="changeColor(this.value)"/>

将此函数添加到您的 JavaScript:

function changeColor(c) {
    document.getElementById("elementId").style.backgroundColor = c;
}

"elementId"您要更改颜色的 div 的 ID 在哪里,它应该可以工作。请注意,您只能通过这种方式更改弹出窗口中元素的颜色。如果你想改变网站上一个 div 的样式,你需要创建一个Content Script


推荐阅读