【H5新增元素和文档结构】新的全局属性 1. contentEditable 可编辑内容 2. contextmenu 快捷菜单 3. data 自定义属性 4. draggable 可拖动 5.
作者:互联网
以下内容为学习下图这本书做的笔记,非原创。做笔记主要是为了实践一下看看结果加深记忆。
目录:
1. contentEditable 可编辑内容 2. contextmenu 快捷菜单 3. data 自定义属性 4. draggable 可拖动 5. dropzone 拖动数据 6. hidden 隐藏 7. spellcheck 语法检查 8. translate 可翻译
如果元素的 contentEditable 未指定为 true/false, 则是否可编辑取决于其父元素,如果父元素可编辑,则该元素是可编辑的。
在 JS 脚本中有一个属性 isContentEditable ,当元素可编辑该属性的值为 true,不可编辑则为 false。
① 使包含框的文本变成可编辑的
语句:
1 <div contenteditable="true"> 2 <p>1234</p> 3 </div> 4 <!-- 下面没加 contenteditable 属性,包含框内内容不可编辑 --> 5 <div> 6 <p>1234</p> 7 </div>
页面表现:
用于定义上下文菜单,右击时出现。
① 用 contextmenu 属性定义 <div>元素的上下文菜单,其中 contextmenu 属性的值是要打开的 <menu> 元素的 id 属性值。
语句:
1 <div contextmenu="mymenu">上下文菜单 2 <menu type="context" id="mymenu"> 3 <menuitem label="微信分享"></menuitem> 4 </menu> 5 </div>
页面表现:
上下文菜单中没有出现预想的效果,去查了一下,只有Firefox 8.0版本以上的浏览器支持 menuitem 属性。且目前只有 Firefox 支持 contextmenu 属性。
使用 data-* 属性可以自定义用户数据。存储的自定义数据可以被 JS 脚本 利用。当浏览器解析时,会忽略前缀 “data-”,取用其后的自定义属性。
① 使用 JS 脚本访问每个列表项目的 type 属性值
语句:
1 <ul> 2 <li data-animal-type="bird">猫头鹰</li> 3 <li data-animal-type="fish">鲤鱼</li> 4 <li data-animal-type="spider">蜘蛛</li> 5 </ul> 6 <script> 7 var list = document.getElementsByTagName("li"); 8 for( var i=0; i<list.length; i++ ){ 9 console.log(list[i].dataset.animalType); //通过元素的 dataset. 对象获取元素的自定义属性的值 10 } //复合属性名如 animal-type 访问时使用 animalType 11 </script>
页面表现:
draggable 属性定义元素是否可以被拖动。属性取值:
true: 定义元素可拖动
false: 定义元素不可拖动
auto: 定义使用浏览器的默认行为
目前所有主流浏览器都不支持 dropzone 属性
dropzone 属性定义在元素上拖动数据时,是否复制、移动或链接被拖动数据。属性取值:
copy: 拖动数据会产生被拖动数据的副本
move: 拖动数据会导致被拖动数据被移动到新位置
link: 拖动数据会产生向原始数据的链接
可用于防止用户查看元素,直到匹配某些条件,如选择了某个复选框。然后在页面加载之后可以使用 JavaScript 脚本删除该属性,删除之后该元素变为可见状态,同时元素中的内容也即时显示出来。
① 使用 hidden 属性定义段落文本隐藏显示
语句:
1 <p hidden><img src="1.jpg" width="200"></p>
页面表现:
可以对以下内容进行拼写检查: 1. input 元素中的文本值、<textarea>元素中的文本、可编辑元素中的文本
如果元素中的 readOnly 属性或 disabled 属性设为 true,则不执行拼写检查。
① 设计两段文本,第一段文本可编辑,可语法检查;第二段文本可编辑,但不允许语法检查。当编辑文本时,第一段显示检查状态,而第二段忽略。
语句:
1 <div contenteditable="true"> 2 <p spellcheck="true">accesskey</p> 3 <p spellcheck="false">accesskey</p> 4 </div>
页面表现:
效果暂时没看懂。
translate 属性定义是否应该翻译元素内容
① 使用 translate 属性
语句:
1 <p translate="no">请勿翻译本段</p> 2 <p>本段可以被翻译为任何语言</p>
页面表现:
标签:自定义,contextmenu,拖动,元素,编辑,文本,属性 来源: https://www.cnblogs.com/xiaoxuStudy/p/12206081.html