得分
这个题目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);
}
})