HTML5新增的通用属性(HTML5/CSS3/JavaScript讲义)

一、contentEditable属性

    HTML5为大部分HTML元素增加了contentEditable属性,如果将该属性的值设为true,那么浏览器允许开发者直接编辑该HTML元素里的内容,并且它具有可继承性

    HTML5为允许设置contentEditable属性的元素提供了isContentEditable属性,当元素可编辑则返回true,否则false

示例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>contentEditable属性</title>
	</head>
	<body>
		<!-- 直接指定contentEditable=“true”表明该元素是可编辑的 -->
		<div contenteditable="true" style="width: 500px; border:1px solid black">
			疯狂Java讲义
			<!-- 该元素的父元素有contentEditable=“true”,因此该表格也是可以编辑的 -->
			<table style="width: 420px; border-collapse: collapse;" border="1">
				<tr>
					<td>疯狂Java讲义</td>
					<td>疯狂Android讲义</td>
				</tr>
				<tr>
					<td>轻量级Java EE企业应用实战</td>
					<td>经典Java EE企业应用实战</td>
				</tr>
			</table>
		</div>
		<hr />
		<!-- 这个表格默认是不可编辑的,双击之后该表格变为 -->
		<table id="target" ondblclick="this.contentEditable=true" style="width: 420px; border-collapse: collapse;" border="1">
			<tr>
				<td>Java</td>
				<td>Ruby</td>
			</tr>
			<tr>
				<td>C/C++</td>
				<td>Python</td>
			</tr>
		</table>
	
	</body>
</html>

二、designMode属性

designMode属性相当于一个全局的contentEditable属性,如果把整个页面的designMode属性设置为on,则该页面上所有可支持contentEditable属性的元素都编程可编辑状态

document.designMode = "on";


三、hidden属性

HTML5为所有元素提供一个hidden属性,如果某元素的hidden设为true 则浏览器不显示该组件,且不保留该组件所占空间


<div id="target" hidden="true" style="height: 80px;">文字内容</div>
		<button onclick="var target=document.getElementById('target');
			target.hidden=!target.hidden;">显示/隐藏</button>

四、spellcheck属性

HTML5<input.../><textarea.../>等元素增加了spellcheck 性,该属性支持 truefalse两个值,如果为true,则浏览器会对用户 的输入进行语法检

<!-- 指定执行拼写检查 -->
<textarea spellcheck="true" rows="3" cols="40"></textarea>



你可能感兴趣的:(HTML5新增的通用属性(HTML5/CSS3/JavaScript讲义))