使用DOM属性创建的样式按钮？

Question

在这里，我将动态添加按钮到列表标签中。 按钮显示在列表附近，我正在尝试将其向右移动。 当dom创建按钮时，有什么办法可以做到？ 需要指导。

{
    var button = document.createElement("button");
    button.innerHTML = "Add To Favourite";
    button.setAttribute('onclick',
        'addFavourite("' + movie['title'] + '")');
    data.appendChild(button);
}

Answer 1

您可以使用float: right; 将按钮移到<li>最右侧。 您也可以使用margin-left: 40px; 在<li>右边移动几个空格

 var data = document.getElementById('container'); var button = document.createElement("button"); button.innerHTML = "Add To Favourite"; button.className = 'liBtn'; button.setAttribute('onclick', 'addFavourite("sss")'); data.appendChild(button); 

 .liBtn{ margin-left: 40px; } 

 <ul> <li id='container'>List 1</li> </ul> 

Answer 2

如果您想调整，请尝试margin-left 。 检查我为您写的这个小提琴 。 希望它能起作用！

Answer 3

您可以直接使用内联属性float or margin （button.style.float =“ right”）

或者，您可以使用el.style设置内联样式，然后在此字符串中传递所有样式。 像这样：

// Create element
var button = document.createElement("button");
button.innerHTML = "Add To Favourite";                     
button.setAttribute('onclick', addFavourite("'+movie['title']+'"));

// Styling
var styleButton = "float: right; margin-left: 10px;";
button.setAttribute('style', styleButton);

// append
data.appendChild(button);

使用float： Float CSS属性MDN

使用保证金： Margin CSS属性