Question

输入更改时将颜色打印到背景。简单颜色是十六进制颜色，彩色背景是渐变颜色。

当有人更改简单颜色时会更改背景为{id ('smplID')的背景，而背景为('clrfID')。这是我的HTML <div id="previewBG"></div>和Javascript：

       document.getElementById("divID").onchange = function() {previewBG()};

    function previewBG()
    {
        var simpleColor = document.getElementById('smplID').value; // just a HEX #FFFFFF
        var ColorfulBG = document.getElementById('clrfID').value; // Gradient color starts with background: linear-gradient(45deg....
        var divID = document.getElementById('divID'); // the Div im changing the Background Color

        divID.style.background = simpleColor; // style="background: #THECOLOR"
        divID.style = ColorfulBG; // style="background: linear-gradient(45deg...."
    }

它只打印那个div的一个id .. 我试图添加一个if( simpleColor ) { divID.style.background = simpleColor; }，但没有。抱歉我的英文

Answer 1

使用CSS创建一个名为.color-a { background: blue; }的类。使用javascripts .classList方法在您的活动中添加/移除/切换容器元素.color-a或body或section或其他）上的div CSS类例如，选择change。

Answer 2

尼科斯，你的英语很好;不幸的是我的希腊语太可怕了，所以我担心我也不得不用英语回复！

我认为您需要在if语句中包含设置divID背景颜色的两行，以检查是否提供了simpleColor和ColorfulBG。如果只给出一个simpleColor，只需将背景设置为：

if(simpleColor && !ColorfulBG) {
divID.style.background = simpleColor; 
}

如果还输入了ColorfulBG，请使用两个输入来创建渐变：

if (simpleColor && ColorfulBG) {
divID.style.background = 'linear-gradient(45deg,' + simpleColor + ',' +  ColorfulBG + ')'; 
}

您还可以将onChange事件附加到输入而不是周围的div，如下所示：

<input type="text" id="smplID" placeholder="#CECECE" onchange="previewBG()" />
<input type="text" id="clrfID" placeholder="Gradient color" onchange="previewBG()" />

或者不引人注意地这样：

document.getElementById("smplID").onchange = function() {previewBG()}; document.getElementById("clrfID").onchange = function() {previewBG()};

document.getElementById("smplID").onchange = function() {previewBG()};

document.getElementById("clrfID").onchange = function() {previewBG()};

function previewBG()
{
    var simpleColor = document.getElementById('smplID').value; // just a HEX #FFFFFF
    var ColorfulBG = document.getElementById('clrfID').value; // Gradient color starts with background: linear-gradient(45deg....
    var divID = document.getElementById('divID'); // the Div im changing the Background Color
    
 //If only a SimpleColor is entered make that the background   
if(simpleColor && !ColorfulBG) {
    divID.style.background = simpleColor; // style="background: 
    }
    
//if a SimpleColor and ColorfuLBG is entered make a gradient  
 if (simpleColor && ColorfulBG) {
    divID.style.background = 'linear-gradient(45deg,' + simpleColor + ',' +  ColorfulBG + ')'; // style="background: linear-gradient(45deg...."
    }// style="background: linear-gradient(45deg...."
}

div#divID {
    width: 100%;
    height: 100%;
    position: absolute;
}

<div id="divID">
  <input type="text" id="smplID" placeholder="#CECECE" />
  <input type="text" id="clrfID" placeholder="Gradient color" />
</div>

Answer 3

或者我认为我将使用另一个事件simpleColor被打印onChange()而多彩的那个我将它设置为onMouseup()我已经测试过并且它有效但是如果你有一个更好的js代码我会很感激

Javascript：onchange使用相同的div并从2个不同的ID打印

3 个答案: