DHTML技术中的注解、#字符的作用、font属性顺序

本文链接：https://blog.youkuaiyun.com/weixin_45190226/article/details/121474437

代码需求：
页面中已经有一个span标签，要求为页面中添加新的p节点，并为p节点设置背景、边框、文本内容等属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border属性易犯的错误</title>
    <style type="text/css">
        /*为sopan节点设置CSS样式*/
        span{border-style: solid;
             border-color: brown;
             border-width: 3px;
             background-color: lightcoral;}
    </style>
</head>
    <script>
        var addNode = function () {
            var oNewP = document.createElement("p");
            oNewP.innerText = "我是新来的p节点！I am new here!"
            oNewP.style.height = "100px";
            oNewP.style.width = "300px";
            oNewP.style.backgroundColor = "#3ACE3A";
            ///
            //设置新创建节点字体：注意设置的属性顺序，不能乱
            //
            oNewP.style.fontStyle = "italic";//设置字体样式“斜体/正常体”
            oNewP.style.fontVariant = "small-caps";//该属性主要用于定义小型大写字母文本
            oNewP.style.fontWeight = "800";//设置字体的粗细
            oNewP.style.fontSize = "30px";//设置字体大小
            oNewP.style.fontFamily = "NSimSun"//设置字体“宋体/新宋体/微软雅黑”
            oNewP.style.color = "#DD4F42";//设置字体颜色
            //设置新建节点的边框属性
            oNewP.style.borderStyle = "dashed";//虚线
            oNewP.style.borderColor = "#F8D714";
            oNewP.style.borderWidth ="6px";//宽度
            //将新创建的div节点挂载到body上
            var oBody = document.body;
            oBody.appendChild(oNewP);
        }
    </script>
<body>
    <!-- span标签 -->
    <span>span111</span>
    <br/><br/>
    <input type="button" value="点击按钮添加新的节点" onclick="addNode()"/>
</body>
</html>

执行代码结果如下：
在这里插入图片描述可以无限制地在网页中添加新的p节点。

1-注意“注解问题”：
html、javaScript、CSS这三者的注解字符是不一样的，如果弄混淆了，很可能会使这个代码不能正常运行。

2-注意“#问题”：

oNewP.style.borderColor = "#F8D714"

使用十六进制为节点颜色属性赋值的时候一定要记得在十六进制数字前加上#符号，否则设置的十六进制颜色属性值不起作用。

3-注意“font属性设置的顺序”：

oNewP.style.fontStyle = "italic";//设置字体样式“斜体/正常体”
oNewP.style.fontVariant = "small-caps";//该属性主要用于定义小型大写字母文本
oNewP.style.fontWeight = "800";//设置字体的粗细
oNewP.style.fontSize = "30px";//设置字体大小
oNewP.style.fontFamily = "NSimSun"//设置字体“宋体/新宋体/微软雅黑”