前端面试题---DOM测试36

得分

这个题目7分我是得了4分

解析

第一问

var textarea = document.querySelector('textarea');

第二问

1.对象添加

textarea .rows = 5;

2.元素添加

 textarea.setAttribute('rows', 5);

第三问

这里主要是兼容IE和谷歌的一起的写法(其实没必要可以直接不管IE)

    /**
     *
      获取元素的浏览器中最终渲染效果的样式
     *
     @method setstyle
     *
     @param {object} [element] 元素名
     *
     @param {string} [type] 需要查找的样式名称,小驼峰格式
     *
     @return {srting || Number} 获取到的样式的值
    */
    function setstyle(element, type) {
      if (element.currentStyle) {
        return element.currentStyle.type
      } else {
        return getComputedStyle(element, null)[type]
      }
    }
    let textareaEleHeight = setstyle(textarea, 'height');
    console.log(textareaEleHeight)

第四问

这里是题目少写了一个行高的值，所以我们要自己添加

textarea {line-height: 1.15;}

这里是关于 getComputedStyle赋值的另一种写法

const { lineHeight } = window.getComputedStyle(textarea);
textarea.style.height = parseFloat(lineHeight) * textarea.rows + 'px';

注意：如果这里没有说写一个行高的值，那么要去判断，应该行高的默认值为normal，而不是一个数值，要去进行转换

第五问

这个我完全理解错了意思，我直接把大佬的答案写出来把(真的好强的大佬)

event.target：是指事件触发的元素

event.currentTarget: 是指绑定事件的元素(例如这里的document元素)

document.addEventListener('DOMNodeInserted', function(ev) {
   var target = event.target;
   if ( target .tagName == 'TEXTAREA' ) {
      setHeight(target);
   }
});

注意:另外，DOMNodeInserted是一个不太标准的事件，已从Web标准中删除，将来可用MutationObserver代替

其次，实现监听元素插入还可以采用css动画，如下

给元素添加一点动画，记住这个动画名字show

textarea{
    opacity: 0;
    animation: show .3s linear forwards;
}
@keyframes show{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

然后，添加animationstart回调，判断动画名称即可

document.addEventListener('animationstart',function(ev){
    if(ev.animationName == 'show'){
        //新元素出现了...
        console.log(ev.target);
    }
})