Question

我的代码生成了一个可以在黑色中更改颜色的可点击框 - ＆gt;绿色 - ＆gt;只要点击鼠标，就可以通过绿色阴影循环显示白色。我需要集成代码，当按下按钮时，允许当前选择的代码（当前显示的任何阴影）在输出中可见。所以，假设我单击该框12次以更改颜色。然后，我会点击一个按钮，说出＆＃34; save＆＃34;例如，当前显示在框中的任何阴影都将出现在输出中。附上的是我的代码。我需要帮助实现按钮，这将允许我按下按钮按钮，这样我就可以看到人们正在选择哪种颜色。此外，是否可以将这些输出直接保存到excel文件中？这样他们点击了保存按钮，它执行的代码直接将选定的阴影转换为excel文档。

var div = document.querySelector('#myDiv')
div.dataset.color = 0;
div.addEventListener('click', () => {
div.dataset.color = parseInt(div.dataset.color) + 5;
var c = Math.min(div.dataset.color % 512, 255);
var c2 = Math.max((div.dataset.color % 512) - 255, 0);
div.style.background = 'rgb(' + c2 + ',' + c + ',' + c2 + ')';
})

#myDiv {
width: 200px;
height: 200px;
background: #000000;
}

<div id="myDiv"></div>

Answer 1

这样做：

颜色值将以rgb为单位。

使用JS：

document.getElementById("myDiv").style.backgroundColor -  will extract the background color

使用jQuery：

jQuery('#myDiv').css("background-color");

var div = document.querySelector('#myDiv')
div.dataset.color = 0;
div.addEventListener('click', () => {
div.dataset.color = parseInt(div.dataset.color) + 5;
var c = Math.min(div.dataset.color % 512, 255);
var c2 = Math.max((div.dataset.color % 512) - 255, 0);
div.style.background = 'rgb(' + c2 + ',' + c + ',' + c2 + ')';
})

function GetCol()
{
alert(document.getElementById("myDiv").style.backgroundColor);
document.getElementById("ColValue").value = document.getElementById("myDiv").style.backgroundColor;
}

#myDiv {
width: 200px;
height: 200px;
background: #000000;
}

<div id="myDiv"></div>

<input type="button" id="btn" value="save and show col" onClick="GetCol()">

<input type="text" id="ColValue">

然后在获取颜色值后使用某些服务器端语言（如php）将此值保存到excel，db或任何您希望保存此值的内容。

Answer 2

您可以使用getComputedStyle（）来获取元素的当前样式：

请在此处找到示例

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_getcomputedstyle

<!DOCTYPE html>
<html>
<body>

<p>Click the button to get the computed background color for the test div.</p>
<p><button onclick="myFunction()">Try it</button></p>
<div id="test" style="height: 50px;background-color: lightblue;">Test Div</div>
<p>The computed background color for the test div is: <span id="demo"></span></p>

<script>
function myFunction(){
    var elem = document.getElementById("test");
    var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("background-color");
    document.getElementById("demo").innerHTML = theCSSprop;
}
</script>

</body>
</html>

Answer 3

var getColorOnClick = function(e) {
  e.preventDefault();
  var elem = document.getElementById("mybutton");
  var bgcolor = window.getComputedStyle(elem,null).getPropertyValue("background-color");

  // do something with bgcolor
}

我需要使用保存颜色ID的按钮来记录输出

3 个答案: