语言►JavaScript►HTMLElement

JavaScript中的HTMLElement

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/10/26/JavaScript%E4%B8%AD%E7%9A%84HTMLElement/

摘要

本文主要讲述了：

  1. DOM 属性

正文

注：

  1. <html>元素对应的类是HTMLHtmlElement，而非HTMLElement
  2. DOM 属性和 HTML 特性并不是互斥的。一种性质有可能既是 DOM 属性，又是 HTML 特性
  3. DOM 属性表现在 JavaScript 中，HTML 特性表现在 HTML 中

DOM 属性

此处讨论的是HTMLElement实例的 DOM 属性，尽管可能存在同名的 HTML 特性

isContentEditable

getter属性

contentEditable

getter属性和setter属性

作为getter属性时，默认值为inherit

作为setter属性时，只接收以下字符串：

  • true
  • false
  • plaintext-only
  • inherit

如果传入非字符串，会隐式转换为字符串

注意：

  1. 一旦使用 JavaScript 修改过元素的contentEditable属性，那么浏览器会把contentEditable投射到元素的contenteditable特性上
  2. contenteditable特性并不是布尔特性，而是枚举特性

投射关系：

  • 当contenteditable特性缺省时，contentEditable属性为inherit
  • 当contenteditable特性为空字符串时，contentEditable属性为true
  • 当contenteditable特性为true时，contentEditable属性为true
  • 当contenteditable特性为false时，contentEditable属性为false

示例：

1
2
3
4
5
// <body contenteditable="true"></body>
document.body.contentEditable = true;

// <body contenteditable="false"></body>
document.body.contentEditable = false;

draggable

getter属性和setter属性

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/10/26/JavaScript%E4%B8%AD%E7%9A%84HTMLElement/

本文对你有帮助？请支持我

支付宝
微信