“`html that changes color of element “`

huangapple go评论78阅读模式
英文:

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

{

  &quot;manifest_version&quot;: 2,
  &quot;name&quot;: &quot;div color&quot;,
  &quot;version&quot;: &quot;1.0&quot;,

  &quot;description&quot;: &quot;Changes color of div&quot;,
  &quot;icons&quot;: {
    &quot;48&quot;: &quot;icon.png&quot;
  },

  &quot;permissions&quot;: [
    &quot;activeTab&quot;
  ],

  &quot;browser_action&quot;: {
    &quot;default_icon&quot;: &quot;icon&quot;,
    &quot;default_title&quot;: &quot;div&quot;,
    &quot;default_popup&quot;: &quot;popup.html&quot;
  },

}

Popup

&lt;html&gt;
&lt;head&gt;&lt;script src=&quot;popup.js&quot;&gt;&lt;/script&gt;&lt;/head&gt;
&lt;body&gt;
&lt;input type=&quot;color&quot; id=&quot;pickcolor&quot;&gt;
&lt;/body&gt;
&lt;/html&gt;

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

&lt;input type=&quot;color&quot; id=&quot;pickcolor&quot; onchange=&quot;changeColor(this.value)&quot;/&gt;

Add this function to your JavaScript:

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

where &quot;elementId&quot; 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.

huangapple
  • 本文由 发表于 2020年9月18日 03:52:46
  • 转载请务必保留本文链接:https://go.coder-hub.com/63945333.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定