/*设置元素可编辑*/
div[contenteditable="true"] {
border: 2px solid blue;
padding: 10px;
}
例如,上面的代码可以让id为myDiv的div元素变成可编辑的,同时显示出蓝色边框和10px的内边距。
在实际应用中,大家可以将此方法应用在一些富文本编辑器上,比如实现类似于Word的文章编辑功能。具体来说,大家可以:
- 设置多个不同格式的按钮,如加粗、斜体、下划线、字号等。
- 为按钮设置事件,在点击时切换不同的CSS样式。
- 对编辑区域使用contenteditable属性,可以像Word一样修改文章。
- 最后通过JavaScript获取编辑好的文章内容,保存到服务器端。