使用纯 JS 创建具有 id 和样式的元素答案

【问题标题】：Create Element with id and styles using pure JS使用纯 JS 创建具有 id 和样式的元素
【发布时间】：2015-04-27 21:34:10
【问题描述】：

我构建了一个小函数，附加一个带有 id 和样式的元素。并且知道我的问题为什么这段代码不起作用？

    window.addEventListener("load",function(e){
        var inButton    = document.createElement("DIV"),
            body        = document.body;
        inButton.id = "button";
        inButton.style = function (){
            height       = "200px";
            width        = "400px";
            position     = "fixed";
            top          = "50%";
            left         = "50%";
            marginLeft   = -1*(this.width / 2);
            marginTop    = -1*(this.height / 2);
        };
        body.appendChild(inButton);
    }, false);

我使用以下 html：


        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8"/>
            <meta name="description"/>
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <meta http-equiv="x-ua-compatible" content="ie=edge" />
            <script type="text/javascript" src="js/vendor/modernizr-.8.3.min.js"></script>
        </head>
        <body>
        <script type="text/javascript" src="js/plugins.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
        </body>
        </html>

Js 代码在 main.js 中。

我反复检查路径，但路径完全正确。

【问题讨论】：

您是否收到任何控制台错误？
.style = function 看起来很奇怪
不，没有输出错误
@RienNeVaPlus 我有点懒，虽然这是一种不再写 inButton.style.xxx 的捷径

标签： javascript function appendchild createelement

【解决方案1】：

您没有正确设置style 属性。其余代码是正确的。

这是一个例子

window.addEventListener("load", function(e) {
  var inButton = document.createElement("DIV"),
    body = document.body;
  inButton.id = "button";
  inButton.innerHTML = "Yahooooooooooooooo"; //For example

  inButton.style.height = "200px";
  inButton.style.width = "400px";
  inButton.style.position = "fixed";
  inButton.style.top = "50%";
  inButton.style.left = "50%";
  inButton.style.marginLeft = -1 * (this.width / 2);
  inButton.style.marginTop = -1 * (this.height / 2);

  body.appendChild(inButton);
}, false);

【讨论】：