首页 > 代码库 > JS 操作样式 操作元素
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="http://www.mamicode.com/创建" />
</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="http://www.mamicode.com/StyleSheet.css" rel="stylesheet" />
</head>
<body>
<!-- 大总框-->
<div class="all">
<textarea id="text"></textarea>
<input type="button" value="http://www.mamicode.com/发表" 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=http://www.mamicode.com/‘删除‘ id=‘dele‘ /> 2017-03-02
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 操作样式 操作元素
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。