在很多时候，我们想让一个元素可编辑，怎么做呢？除了用一个input、textarea标签？这个方法虽然可行，但我有一个更加简单的方法可以让元素可编辑。在html中2个全局属性分别是
contentEditable和
contenteditable，可以让元素可编辑。可能有人会问了，这2个属性有什么区别呢？我直接告诉你功能上没有区别。是不是开始觉得w3c吃饱了撑着没事做了。当然不是了，要注意下面这点了，关于html中为什么会出现这2个属性？contentEditable属性是html4中的一种写法，后来html5的出现增加了很多新的属性，其中就有一个全局属性
contenteditable，对于contenteditable是趋于xhtml，使用的是全小写contenteditable，而contentEditable就不多说了，是趋于html4的一种写法。废话不多说，下面介绍一下它的写法吧。
contenteditable属性，它有3个值，分别是true、false和inherit。接下来就简单介绍下这个3个值的意思。
contenteditable='
true' 指定元素可编辑
contenteditable='
false' 指定元素不可编辑
contenteditable='
inherit' 指定元素继承父级元素状态
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: greenyellow;
}
</style><body>
<!-- html5写法 -->
<div class='box' contenteditable='true'>
<!-- 继承父级元素的状态 -->
<p class='box2' contenteditable='inherit'>继承</p>
</div>
<!-- 当为空字符串是和true效果一样 -->
<p class='box' contenteditable=''>只写一个字符串，和true的效果一样</p>
<!-- html4写法，不建议使用 -->
<p class='box' contentEditable='true'>html4写法</p>
<!-- contenteditable可直接使用而不需赋值；较新的浏览器中不会报错，但不建议这么写 -->
<div class='box' contenteditable>直接使用而不需赋值</div>
</body>
效果图：
扫一扫
746
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
