JS 操作样式操作元素

Posted 2020-09-08 天晴微笑

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS 操作样式操作元素相关的知识，希望对你有一定的参考价值。

创建多个div

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1 {
            width:200px;
            height:200px;
            background-color:aqua;
        }
        .ddd {width:50px;
              height:50px;
              background-color:red;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    
    <input type="button" id="btn" value="创建" />
</body>
</html>
<script type="text/javascript">
    var div = document.getElementById(‘div1‘);
    var btn = document.getElementById(‘btn‘);
    btn.onclick = function () {
        div.innerHTML+="<div class=‘ddd‘></div>"

    }

</script>

评论添加删除

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
   <!-- 大总框-->
    <div class="all">
        <textarea id="text"></textarea>
        <input type="button" value="发表" id="btn" />
        <input type="text" id="uuu" placeholder="请输入用户名" />
        </div>
        <div class="iterm">
          
        </div>
</body>
</html>
<script type="text/javascript">
    var btn = document.getElementById(‘btn‘);
    var int = document.getElementsByClassName(‘tterm‘);
    //内容取值
    var t = document.getElementById(‘text‘);
    var text = t.value;
    //用户名取值
    var a = document.getElementById(‘uuu‘);
    var user = a.value;
    // 添加内容
    btn.onclick = function () {
        int.innerHTML+="<div class=‘cell‘>"+user+"</div><div class=‘cell‘>"+text+"</div><div class=‘cell‘><input type=‘button‘ value=‘删除‘ id=‘dele‘ /> 2017-03-02</div>"
    }


      
</script>

css

* {
    margin: 0px;
    padding: 0px;
}

.all {
    margin-left: 20%;
    width: 60%;
    height: 400px;
    background-color: gray;
}

#text {
    width: 100%;
    height: 300px;
    border: 1px solid black;
}

.iterm {
    margin-left: 20%;
    width: 60%;
    background-color: blue;
}
.cell {
    position:relative;
    height:50px;
    width:80%;
    margin-left:10%;
    border-bottom:1px dashed black;
}
#dele {
    position:absolute;
    bottom:5px;
    right:10px;
}

以上是关于JS 操作样式操作元素的主要内容，如果未能解决你的问题，请参考以下文章

操作元素之二维码关闭

js控制iframe内部css样式

JS DOM基础操作属性类CSS样式

jQuery操作元素属性操作样式操作样式类操作HTML代码以及其他操作 [学完你还不会吗]

JQuery操作元素的属性与样式及位置

JS-DOM样式操作

JS 操作样式 操作元素

JS 操作样式操作元素