forEach
js
[].forEach.call(
document.getElementById('items'),
function(item, index) {
// item.getElementsByTagName('p')[0].innerHTML =
// (index + 1).toString() + '.'
}
)
p标签的文字内容
.innerHTML
复制元素并粘贴到父元素
html
<ul>
<li id="item">#</li>
</ul>
js
var item = document.getElementById('item').cloneNode(true) // true: 孩子结构也一并复制
item.id = 'new-item' // [可选] 不设置的话,新元素id和被复制元素id相同
document.getElementById('item').parentNode.appendChild(item)
js获取元素的区别
document.getElementById() 得到一个结点
document.getElementsByClassName() 得到一组结点
.parentNode 得到一个结点
.childNodes 得到一组结点
鼠标移进祖先元素时,孩子元素显示,移出消失
html
<li class="list-group">
……
<span class="setting-icon">#</span>
……
</li>
css
.setting-icon{
display: none;
}
.list-group:hover .setting-icon {
display: inline;
cursor: pointer;
}
textarea, input, 可编辑div 的选择
textarea: 默认可拉伸,此时右下角会有两道短线,也可使用resize:none;
去掉短线,但同时也设置了不可拉伸;在元素上使用rows=1
可设置可显示行数,没办法直接实现自适应高度。
input: 只可编辑一行,显示高度可以设置,不可拉伸。
可编辑div: 不可拉伸,css可以直接设置自适应宽高,没有placeholder,不过可以用css手动实现。举例:
html
<div
contenteditable="true"
class="editdiv"
placeholder="默认填充"
></div>
css
.editdiv {
height: auto; /*自适应高度*/
}
.editdiv:empty:before {
content: attr(placeholder);
color: rgb(194, 194, 194);
}
.editdiv:focus:before {
content: none;
}
另:若想让输入框变灰,实现只读,需要在元素上加属性readonly