Свойств кнопок javascript

165

23 декабря 2019, 01:10

Есть ли возможность изменять свойства кнопок только средствами javascript. Например, создаю кнопку таким образом:

var btn = document.createElement('input'); 
btn.id = 'b1'; 
btn.type = 'button'; 
btn.value = 'button 1'; 
btn.setAttribute('onclick', 'obj.HandleClick1();'); 
document.body.appendChild(btn);

Есть ли возможность меня свойства кнопок именно из javascript. Ну то есть, сделать саму красивую кнопку, сделать анимацию при наведении на кнопку и прочее.

Answer 1

То что касается программного изменения свойств:

У элементов есть св-во .style которое по сути inline стиль элемента

Для работы с ним все CSS св-ва преобразуются в camelCase т.е background-color становится backgroundColor

Добавляйте обработчик правильно, либо присваивая ф-цию полю .onclick= ... либо добавляя в коллекцию слушателей: setAttribute('onclick', ...)

var btn = document.createElement('input'); 
btn.id = 'b1'; 
btn.type = 'button'; 
btn.value = 'button 1'; 
btn.onclick = function(){ 
  btn.style.backgroundColor = `hsl(${Math.random()*255},100%,75%)` 
} 
 
document.body.appendChild(btn);

Можно так же воспользоваться стилями

var btn = document.createElement('input'); 
btn.id = 'b1'; 
btn.type = 'button'; 
btn.value = 'button 1'; 
btn.onclick = function(){ 
  btn.className = `btn${Math.round(Math.random()*3)}` 
} 
 
document.body.appendChild(btn);

.btn0 { 
  background-color: red; 
} 
.btn1 { 
  background-color: green; 
} 
.btn2 { 
  background-color: blue; 
}

PS: но похоже что Вы сможете обойтись только лишь CSS с Вашей задачей, без javascript

Answer 2

Так вроде как легче:

var style = document.createElement('style');
style.innerText = "#b1 {border: 2px solid red; background-color: white; color: #123}";
document.body.prepend(style);

Чем каждый раз отдельно получать кнопку и менять у него .style