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

怎么js设置Img的宽度,和高度,第1张

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


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11947820.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存