怎么js设置Img的宽度，和高度

1、界面中有一个img，但是没有用js来设置它的宽度高度和背景颜色。

2、接着使用jQuery获取到所要设置的div，并且调用css（）方法即可开始设置了。

3、在css方法即可设置，注意，里面有花括号哦，并且属性用双引号引起来。

4、同时设定多个属性，则要用逗号隔开，这样即可多个属性生效。

5、接着打开hbuilder上方浏览器小图标，开始预览。

6、最后观看效果。

如果需要用原生js动态的加载另外一个js文件，可以使用原生js的document.createElement方法创建script节点，然后更改该节点的type和src属性,最后通过appendChild方法将该节点动态添加到html中，这样就可以了，参考代码如下：

var new_element = document.createElement("script")//创建新的script节点new_element.setAttribute("type", "text/javascript")new_element.setAttribute("src", "../js/jquery.js")document.body.appendChild(new_element)//添加到body节点的末尾

上例中是在body的最末尾添加的，当然同样可以在head中添加引用该js的标签：document.head.appendChild(new_element)

分析该过程，可拆分成两个步骤：

该布局基于 element-ui，一个父容器 box，里面一个 mask div，一个 el-checkbox-group 块。其中父容器设置 position: relative子 mask 容器设置 position: absolute并且其宽、高、偏移值根据鼠标当前位置动态计算

该部分逻辑实际上可拆分为 4 个步骤：

1. 给 box 绑定 mousedown 事件

2. mousemove 事件，比较简单，只是更新 end_x，end_y 坐标

3. mouseup 事件，移除 mousemove、mouseup 事件，并调用判断方法

4. 处理框选逻辑

难点是如何判断元素是否被框选住

问题可转化为 框选矩形是否与 checkbox 矩形 相交或者包含在内,即 两矩形是否相交或者存在包含关系

假定矩形 A1 左上角坐标为 (x1,y1)矩形宽度为 width1,高度为 height1

假定矩形 A2 左上角坐标为 (x2,y2)矩形宽度为 width2,高度为 height2

画图分析，只看水平方向：

由图可以得出，x 方向上：

令 maxX = Math.max(x1 + width1, x2 + width2)

令 minX = Math.max(x1, x2)

若相交或包含则必满足： maxX - minX <= width1 + width2

同理可以容易得到 y 轴相交的判断

使用 Element.getBoundingClientRect()获取 dom 元素位置信息

该部分逻辑如下，比较简单

难点已经攻破，遍历 checkbox 集合，每个 checkbox 都执行上面的矩形相交判断，并进行相应的勾选处理，此处不再多累述

源码

END

---