2013-12-12 29 views
0

我想製作一個顏色選擇器來改變用戶創建的顏色的不透明度。該html基本上持有輸入的形式,我得到document.getElementById().value。我的問題是:如何將輸入值存儲在變量中,以便我能夠更改從用戶獲得的RGB顏色的不透明度? 這是從窗體中獲取所有顏色的函數。如何將表單中的值存儲到變量中以供將來在函數中使用?

+1

它是'document.getElementById()',除非它直接在你的HTML中。 – PHPglue

+0

關於[cookies](http://www.quirksmode.org/js/cookies.html)? – SIFE

回答

0

你的意思是:

function generateColor() { // generate colors and save them for later on 
var red = getElementById("red").value, 
    green = getElementById("green").value, 
    blue = getElementById("blue").value, 
    rgb = "rgb(" + red + "," + green + "," + blue + ")"; 

那麼你可以在你使用red, green and blue

+0

是的,它沒有什麼不同,它將一個值傳遞給一個函數,該函數會設置不透明度,或者首先將其設置在那裏。 @亨利Lynx – wf4

0

聲明一個var storedValue = 0之外的任何功能的相同方式使用rgb。然後在你的函數裏面,沒有 var,設置它的值。

function generateColor() { // generate colors and save them for later on 
    var red = getElementById("red").value; 
    var green = getElementById("green").value; 
    var blue = getElementById("blue").value; 
    storedValue = blue; 
    return "rgb(" + red + "," + green + "," + blue + ")"; 
+0

這是正確的方法來做到這一點,如果你想改變不透明度在不同的功能,如果你打算擴大你的當前功能,那就沒有必要。 – wf4

+0

所以我可以讓它rgb.style.opacity = 0,5;在相同的功能? –

0

也許這會有所幫助。所有數據都存儲在一個數組引用:

function generateColor() { // generate colors and save them for later on 
    var red = getElementById("red").value; 
    var green = getElementById("green").value; 
    var blue = getElementById("blue").value; 

var colors = new Array(); 
colors[red] = red; 
colors[green] = green; 
colors[blue] = blue; 

return(colors); 
} 
0

試着做一個構造函數:

// common.js 
//<![CDATA[ 
var doc = document, bod = doc.body; 
function E(e){ 
    return doc.getElementById(e); 
} 
//]]> 

// other.js 
//<![CDATA[ 
function generateColor(redId, greeId, blueId, opacityId, whereId){ 
    this.red = 0; this.green = 0; this.blue = 0; this.opacity = 1; 
    this.getRed = function(red_id){ 
    if(!red_id)red_id = redId; 
    var r = this.red = E(red_id).value; 
    return r; 
    } 
    this.getGreen = function(green_id){ 
    if(!green_id)green_id = greenId; 
    var g = this.green = E(green_id).value; 
    return g; 
    } 
    this.getBlue = function(blue_id){ 
    if(!blue_id)blue_id = blueId; 
    var b = this.blue = E(blue_id).value; 
    return b; 
    } 
    this.getOpacity = function(opacity_id){ 
    if(!opacity_id)opacity_id = opacityId; 
    var o = this.opacity = E(opacity_id).value; 
    return o; 
    } 
    this.build = function(where_id){ 
    if(!where_id)where_id = whereId; 
    var e = this.where = E(where_id), o = this.opacity; 
    e.style.color = 'rgb('+this.red+', '+this.green+', '+this.blue+')'; 
    e.style.opacity = o.toString(); 
    e.style.filter = 'alpha(opacity='+100*(+o)+')'; 
    } 
} 

現在你可以做兩種:

var wow = new generateColor; 
wow.getRed('red'); wow.getGreen('green'); wow.getBlue('blue'); 
wow.getOpacity('opacity'); wow.build('outputId'); 
//]]> 

var wow = new generateColor('red', 'green', 'blue', 'opacity', 'outputId'); 
wow.build(); 
//]]> 

或者您可以設置不基於o的顏色nid

var wow = new generateColor; 
wow.red = 4; wow.blue = 7; wow.green = 'f'; wow.opacity = 0.5; 
wow.build('outputId'); 
//]]> 
相關問題