DOM基础测试36 - textarea高度

[JaimeCheng]

题目：

原issue

回答：

// 我的回答 9分
// 1
const text = document.getElementsByTagName('textarea')[0]

// 2
text.rows = 5

// 3
const height = window.getComputedStyle(text).height

// 4 
// 默认获取到的lineHeight是normal只好先设置一下值了
text.style.lineHeight = 1.5
const lineHeight = parseFloat(window.getComputedStyle(text).lineHeight)
text.style.height = text.rows * lineHeight + 'px'

// 5 
// 只想到监听DOMNodeInserted事件，但是应该不对
// 跟题目里说的一样，还是每次添加textarea重新执行一遍样式设置
document.body.addEventListener('DOMNodeInserted', (e) => {
  const dom = e.target
  if (dom.nodeName.toLowerCase() === 'textarea') {
    var originalLH = parseFloat(window.getComputedStyle(dom).lineHeight)
    if (isNaN(originalLH)) {
      dom.style.lineHeight = 1.5
      originalLH = parseFloat(window.getComputedStyle(dom).lineHeight)
    }
    dom.style.height = dom.rows * originalLH + 'px'
  }
})

满分回答 | 优秀回答

总结：

1. 这次小测比较基础，前几题都答出来了；
2. 最后一题考察的是新特性MutationObserver，完全不了解。

> 在线demo <

[JaimeCheng]

zxx: 本期要点

1. document.querySelector;
2. myTextarea.rows = 5;
3. window.getComputedStyle(myTextarea).height
4. IE下textarea的高度不是行高决定的，而是font-size和font-family。
5. DOMNodeInserted(DOM level 3, IE9+)以及MutationObserver(DOM level 4 IE11+)。前者不是异步的，所以如果有大量的DOM变化和事件处理，性能影响会很明显，MutationObserver则是异步的，先观察，然后一次性处理。

   document.addEventListener('DOMNodeInserted', function(event) {
   if (event.target.nodeName.toLowerCase() === 'textarea') {
   //...
   }
   });

6. 相关文章