如何使用雅虎颜色选择器更改背景颜色

发布于 2024-10-13 09:08:34 字数 1828 浏览 5 评论 0原文

大家好,我有一项任务,需要将 Yahoo UI 颜色选择器集成到网站中。当有人选择一种颜色时,页面的背景需要变成该颜色。

我按照此处的说明 http://developer.yahoo.com/yui/colorpicker/#events 但我似乎不知道如何将背景颜色更改为所选颜色。当有人选择颜色时,我可以更改背景,但是我不知道如何获取选择为输入/的颜色(请参阅 // 注释的代码),直到现在我有这个:

在 head:

<!-- Dependencies --> 
<script src="http://yui.yahooapis.com/2.8.2r1/build/utilities/utilities.js" ></script>
<script src="http://yui.yahooapis.com/2.8.2r1/build/slider/slider-min.js" ></script>

  <!-- Color Picker source files for CSS and JavaScript -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/colorpicker/assets/skins/sam/colorpicker.css">
<script src="http://yui.yahooapis.com/2.8.2r1/build/colorpicker/colorpicker-min.js" ></script>

then 在 body 标记中: class="yui-skin-sam"

并在正文中:

<div id="container"></div>
<script type="text/javascript">
var picker = new YAHOO.widget.ColorPicker("container", {
 showhsvcontrols: true,
 showhexcontrols: true,
 images: {
  PICKER_THUMB: "picker_thumb.png",
  HUE_THUMB: "hue_thumb.png"
 }
});

//a listener for logging RGB color changes;
//this will only be visible if logger is enabled:
var onRgbChange = function(o) {
 /*o is an object
  { newValue: (array of R, G, B values),
    prevValue: (array of R, G, B values),
    type: "rgbChange"
   }
 */
    // with this code i change the background when a color is picked, but not with the input col.
    // document.body.style.backgroundColor = 'green';
 YAHOO.log("The new color value is " + o.newValue, "info", "example");
}

//subscribe to the rgbChange event;
picker.on("rgbChange", onRgbChange);

  </script>

Hey all, I have this assignment where I need to integrate the Yahoo UI color picker into a website. When someone picks a color the background of the page need to become that color.

I followed instructions here http://developer.yahoo.com/yui/colorpicker/#events but I can't seem to figure out how to change the backgroundcolor to the picked color. I can change the background when someone picks a color, however I don't know how to get the color that is picked as input/ (see code for // comment) up until now i have this:

in head:

<!-- Dependencies --> 
<script src="http://yui.yahooapis.com/2.8.2r1/build/utilities/utilities.js" ></script>
<script src="http://yui.yahooapis.com/2.8.2r1/build/slider/slider-min.js" ></script>

  <!-- Color Picker source files for CSS and JavaScript -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/colorpicker/assets/skins/sam/colorpicker.css">
<script src="http://yui.yahooapis.com/2.8.2r1/build/colorpicker/colorpicker-min.js" ></script>

then in body tag: class="yui-skin-sam"

and in body:

<div id="container"></div>
<script type="text/javascript">
var picker = new YAHOO.widget.ColorPicker("container", {
 showhsvcontrols: true,
 showhexcontrols: true,
 images: {
  PICKER_THUMB: "picker_thumb.png",
  HUE_THUMB: "hue_thumb.png"
 }
});

//a listener for logging RGB color changes;
//this will only be visible if logger is enabled:
var onRgbChange = function(o) {
 /*o is an object
  { newValue: (array of R, G, B values),
    prevValue: (array of R, G, B values),
    type: "rgbChange"
   }
 */
    // with this code i change the background when a color is picked, but not with the input col.
    // document.body.style.backgroundColor = 'green';
 YAHOO.log("The new color value is " + o.newValue, "info", "example");
}

//subscribe to the rgbChange event;
picker.on("rgbChange", onRgbChange);

  </script>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

椒妓 2024-10-20 09:08:34

将背景颜色设置为 RGB 值(o.newValue 给出的值)的语法如下所示:

doc.style.backgroundColor="rgb(239,239,239)";

...所以,尝试这样的操作:

document.body.style.backgroundColor = "rgb(" + o.newValue[0] + "," + o.newValue[1] + "," + o.newValue[2] + ");"  

The syntax for setting the background color to a RGB value (what o.newValue gives) looks like:

doc.style.backgroundColor="rgb(239,239,239)";

...so, try something like this:

document.body.style.backgroundColor = "rgb(" + o.newValue[0] + "," + o.newValue[1] + "," + o.newValue[2] + ");"  
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文