全局属性
contentEditable属性
该属性的主要功能是允许用户编辑元素中的内容,所以该元素必须是可以获得鼠标焦点的元素.
在鼠标点击后要向用户提供一个插入符号,提示该用户该元素中的内容是允许编辑的.
该元素是一个bool属性,可以被指定true或false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p contenteditable="">Lorem ipsum dolor sit amet.</p>
</body>
</html>
该属性还有一个隐藏的inherit(继承)状态,当属性值为true时,元素被指定为允许编辑,false则相反; 当元素未被指定时,则有inherit状态来决定,如果父元素时可编辑的,则该元素就是可编辑的
designMode属性
该属性用来指定整个页面是否可编辑.该属性只能在JavaScript脚本中被编辑修改.该属性只有两个值------’‘on’’ 与’off’.
当该属性被指定为on时,表示可修改
当该属性被指定为off时,表示不可修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>标题</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam praesentium itaque eos nam animi, voluptatibus delectus repellat consectetur atque facilis optio, modi repellendus. Numquam culpa itaque expedita corrupti libero maiores!
</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Possimus inventore iusto cupiditate quam dolore rem.</p>
</body>
<script>
document.designMode='on'; //表示可修改
</script>
</html>