是否可以将htmls按钮中的css样式用于javascript按钮?

时间:2018-11-30 19:07:32

标签: javascript html css

我在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;

0 个答案:

没有答案