基础 - 发布信息

标签：

结构

<div class="box" id="mark">
    <div class="order">
        <textarea name="" id="" cols="30" rows="10"></textarea><button>发布</button>
    </div>
    <div class="show">
        <ul></ul>
    </div>
</div>

样式

* {
    margin: 0;
    padding: 0;
}
.box {
    width: 500px;
    margin: 100px auto;
    font-weight:bold;">#DBE1E7;
}
.box .order {
    border: 5px solid #C81623;
}
.box textarea {
    resize: none;
    width: 400px;
    margin: 20px;
}
.box ul {
    list-style-type: none;
}
.box li {
    width: 100%;
    height: 18px;
    margin: 5px 0;
    font-weight:bold;">#666666;
}

行为

window.onload = function () {
    var oMark = document.getElementById("mark");
    var oText = oMark.getElementsByTagName("textarea")[0];
    var oButton = oMark.getElementsByTagName("button")[0];
    var oUl = oMark.getElementsByTagName("ul")[0];
    oButton.onclick = function () {
        var oLi = document.createElement("li");
        oLi.innerHTML = oText.value;
        oText.value = "";
        oUl.appendChild(oLi);
    }
}

基础 - 发布信息

标签：

原文地址：http://www.cnblogs.com/WeWeZhang/p/5744692.html