前端开发入门经验

1、`<img />`图片底部出现空白

原因：是图片的默认垂直方式所导致的，图片底部默认和文字基线baseline对齐。

解决方法：

结合开发需要，设置图片标签的vertical-align属性为其它对齐方式：

vertical-align: top;
vertical-align: text-top;
vertical-align: middle;
vertical-align: bottom;
vertical-align: text-bottom;

设置图片显示方式为块：
1
display: block;

二者根据实际情况选其一即可。

2、JavaScript无法获取元素某些属性值

原因：js的document.getElementById().style.xxx等方法中，通过style属性获取某些属性值，只能获取到使用内联式定义的css属性！

解决方法：调用浏览器自带方法获取。

适用于大多数常见浏览器：getComputedStyle(Object, weiYuanSu).styleName

该方法获取到的是计算出的要实时在显示屏上渲染出来的最终属性值，需要两个参数:
- 第一个：要获取样式的元素。
- 第二个：可以传递一个伪元素，一般都传null。
该方法会返回一个对象，对象中封装了当前元素对应的样式：
1
2
var imgs = document.getElementsByClassName("imgs");
var imgsWidth01 = getComputedStyle(imgs[0], null).width;

针对IE：Object.currentStyle.styleName

1 2	var imgs = document.getElementsByClassName("imgs"); var imgsWidth01 = imgs[0].currentStyle.width;

注意：二者返回都为String类型！

可将二者结合起来：

function getObjStyle(obj, styleName){
    if(typeof getComputedStyle !== 'undefined')
        return getComputedStyle(obj, null)[styleName];
   else
        return obj.currentStyle[styleName];
}

补充：检查某个元素的当前拥有的所有属性（js的document.getElementById().style.xxx等方法当前可以获取到的）：

Obj.attributes：返回的是一个对象集合，每个对象都有name和value两个属性。

var imgAttrs = fa_div[0].attributes;
console.log(imgAttrs.length);		//检查对象有多少个属性
console.log(imgAttrs[0].name);		//第一个属性名
console.log(imgAttrs[0].value);		//第一个属性值

3、设置图片和链接不可被鼠标拖动

在页面中图片和链接一般都可以被鼠标拖动，就像这样：

图片上传失败，回头重新弄下！

解决方法：设置对象的draggable属性为false：

1	imgs[0].draggable = false;

4、变量提升与暂时性死区

变量提升：

javascript要经历编译和执行两个阶段，编译阶段会自动搜集所有的声明，var声明的变量会首先被赋值为undefined，剩下的语句在执行阶段逐句生效。如：
1
2
3
4
5
6
7
8
9
console.log(a);
var a = 666;

//等价于：
var a;
console.log(a);
a = 666;

//输出undefined
原理：

预编译阶段统计所有var声明的变量，这些变量执行的是变量环境，即为给var声明的变量赋值undefined。

而块级作用域声明的变量执行词法环境，词法环境下声明的变量没有默认值，且在赋值前调用会报错。

词法环境会根据不同的块级作用域生成对应栈，块级作用域就是通过词法环境的栈来实现的，变量提升是变量环境实现的，所以通过词法环境的栈和环境变量混合使用就同时支持了var声明和块级作用域。
作用域与暂时性死区详解

使用let或const声明变量，从声明到到被赋值之前，这段时间叫暂时性死区。

在变量属于暂时性死区时调用变量，就会报错，并且这时候typeof的结果是不准确的。

参考文章：let/const的暂时性死区 - 小丸子的城堡 - 博客园 (cnblogs.com)

前端开发入门经验

前端开发入门经验

1、<img />图片底部出现空白

2、JavaScript无法获取元素某些属性值

3、设置图片和链接不可被鼠标拖动

4、变量提升与暂时性死区

1、`<img />`图片底部出现空白