Javascript DOM元素的左边距不起作用

Javascript DOM元素的左边距不起作用,javascript,html,css,Javascript,Html,Css,我试图创建一个动态的p元素,左边的边距为33px,但它不起作用。但是,如果左侧不使用margin,并且使用静态HTMLP元素,同样可以正常工作。为什么会这样?我试过IE11和Chrome版本60.0.3112.113 <!DOCTYPE html> <html> <head> <title>Chat</title> <meta charset="utf-8"> </head> <body&g

我试图创建一个动态的p元素,左边的边距为33px,但它不起作用。但是,如果左侧不使用margin,并且使用静态HTMLP元素,同样可以正常工作。为什么会这样?我试过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>
msg.style.margin left=33px;将由解析器解释。因此,所有带破折号的CSS属性都在Javascript中编写。

msg.style.margin left=33px;将由解析器解释。因此,所有带破折号的CSS属性都是在Javascript中编写的。

将边距左改为marginLeft。“为什么会这样?”-因为每个费心学习语法基础的人都知道,-减法运算符…将边距左改为marginLeft。“为什么会这样?”-因为每个费心学习语法基础的人都知道,-减法运算符。。。