html中用代码设置CSS属性值

最新推荐文章于 2023-03-18 15:30:58 发布

入门有点晚

最新推荐文章于 2023-03-18 15:30:58 发布

阅读量438

点赞数

文章标签： css html 前端

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

版权

这篇博客介绍了如何使用JavaScript在HTML文档中动态创建新的div元素，并为其添加内容、样式，包括背景色、字体大小、字体型号和颜色。示例代码展示了如何将新节点追加到body元素的末尾。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以前旧的方法代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对html元素进行增、删、改</title>
    <style type="text/css">
        div{border: solid darkgreen 2px;height: 60px;
            width: 100px;margin: 30px 30px 20px 20px;padding:5px;
            font-size: larger; font-family: 微软雅黑}
        #div1{background-color: chartreuse}
        #div2{background-color: brown}
        #div3{background-color: cyan}
        #div4{background-color: blueviolet}

    </style>
    <script type="text/javascript">
        function addNode() {
            //创建新的节点
            var newElement = document.createElement("div");
            //设置新节点的具体内容
            newElement.innerHTML = "<font style='background-color: red'>我是新来的</font>";
            //获取body元素的方法
            var oBody = document.body;
            //将新的节点追加到body上
            oBody.appendChild(newElement);
        }
    </script>
</head>
<body>
    <div id="div1">div区域div1</div>
    <div id="div2">div区域div2</div>
    <div id="div3">div区域div3</div>
    <div id="div4">div区域div4</div>
    <hr/>
    <input type="button" value="创建并添加节点" οnclick="addNode()"/>

在这里插入图片描述正确的代码如下：

//创建一个新的div并将其添加到body最后面
        var addNode1 = function () {
            //创建一个新的div类型的Node
            var newDiv = document.createElement("div");
            //为新创建的div添加内容
            newDiv.innerHTML = "我是新的div，请关注我";
            //为新的div设置背景颜色样式
            newDiv.style.backgroundColor = "yellow";
            //设置新的div中文字字体大小
            newDiv.style.fontSize = "medium";
            //设置新的div中文字字体型号
            newDiv.style.fontFamily = "Aria";
            //为新的div中文字设置字体颜色
            newDiv.style.fontStyle = "red";
            //获取body元素
            var oBody = document.body;
            //将新创建的div添加到body最后面
            oBody.appendChild(newDiv);
        }