Question

我尝试创建一个动态P元素，margin-left为33px。但它不起作用。但是当左边没有使用（边距）和静态html p元素时，同样正常工作。为什么会这样？我已尝试使用IE11和Chrome版本60.0.3112.113。

<!DOCTYPE html>
<html>
<head>
    <title>Chat</title>
    <meta charset="utf-8">
</head>
<body>
    <div id="screenv" style="border:1px solid black;margin: 5px;padding: 5px;width: 300px;height: 300px;"></div></br>
    <input id="tb" type="text" style="border:1px solid black;margin: 5px;padding: 5px;width: 300px;" placeholder="Enter your text"></input>
    <button onclick="submit()">Submit</button>
    <p style="margin-left:33px;">hello</p>//css works fine
    <script type="text/javascript">

        var you="",screen="",msg="",c_time="",val="",d,h,m,line;
        function submit() {

        val=document.getElementById("tb").value;
        screen=document.getElementById('screenv');

        you=document.createElement("div");
        you.innerHTML="You:";

        screen.appendChild(you);


        c_time=document.createElement("p");
        d = new Date();
        h = d.getHours();
        m = d.getMinutes();
        c_time.innerHTML = h+":"+m;
        c_time.style.display="inline";
        c_time.style.color="grey";

        msg=document.createElement("p");
        msg.innerHTML=val;
        msg.style.margin-left="33px";//not working


        line=document.createElement("br");

        you.appendChild(c_time);
        you.appendChild(line);
        you.appendChild(msg);
        document.getElementById("tb").value="";
    }


    </script>

</body>
</html>

Answer 1

msg.style.margin-left="33px";将由解析器解释为as subtract operator。因此，所有带有破折号的CSS属性都是在Javascript中的camelCase中编写的。

DOM元素的margin-left无法正常工作

1 个答案: