我在html文件中具有从css文件样式化的按钮。但是,如何使用相同样式从Javascript文件制作按钮?我尝试了changeColor()
函数,但是它只允许我设置一种背景色而不是多种。
这是JS按钮
var button = document.createElement('button');
button.onclick = function() {
button.className="button";
kontaktBearbeitenInit(kontakt.id);
$('#dialog2').modal('show');
changeColor();
};
var image = document.createElement('img');
image.className = "button-image";
image.src = "images/edit.png";
image.width = "15";
image.height = "15";
button.appendChild(image);
td.appendChild(button);
changeColor();
function changeColor(){
Array.from(document.querySelectorAll('button')).map(function(button) {
button.style.className="button";
})
我的CSS样式
.button {
-moz-box-shadow:inset 0px 1px 3px 0px #9fb4f2;
-webkit-box-shadow:inset 0px 1px 3px 0px #9fb4f2;
box-shadow:inset 0px 1px 3px 0px #9fb4f2;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #b4c3df), color-stop(1, #abc9ee));
background:-moz-linear-gradient(top, #7892c2 5%, #476e9e 100%);
background:-webkit-linear-gradient(top, #7892c2 5%, #9eb7d6 100%);
background:-o-linear-gradient(top, #7892c2 5%, #476e9e 100%);
background:-ms-linear-gradient(top, #7892c2 5%, #476e9e 100%);
background:linear-gradient(to bottom, #7892c2 5%, #9cb6d6 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7892c2', endColorstr='#476e9e',GradientType=0);
background-color:#7892c2;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #4e6096;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-weight:bold;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
text-decoration:none;
text-shadow:0px -1px 0px #283966;