js style.width获取不到元素的宽度

jquery用习惯了,用width()就能获取元素的宽度,但有些时候用js获取元素宽度获取不到,document.getElementById("id").style.width,原因:

1.元素未设置宽度值

2.元素设置了宽度值,但,设置在内联或外联样式表中,而非内嵌式的。

虽然这种方式获取不到元素宽度,但是可以设置宽度 document.getElementById("id").style.width = "100px";

只有将元素的宽度设置成内嵌式,才能通过document.getElementById("id").style.width获取宽度

<p id="p1" style="width:100px;"></p>

对于没有设置宽度的元素、亦或CSS样式非内嵌式的,js原生写法可以通过offsetWidht来获取宽度。

jquery的width()与js的offsetWidth都可以获取元素的宽度,但有个区别:
.width()的值单纯是内容区域的宽度、不包括内外补丁和border。ie6+和chrome相同。
offsetWidth :包括了内补丁和border,不包括外补丁。

非常抱歉给您带来困惑。在代码中,我们需要确保悬浮窗的创建和显示逻辑只在点击图片时才执行,而不是在添加图片后立即执行。为了实现这一点,我们可以将创建悬浮窗的代码从`showPopup`函数中分离出来,然后在点击事件处理函数中根据需要执行。 下面是修改后的代码示例: ```javascript var popup; // 声明一个全局变量来存储悬浮窗元素 function previewImage(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { var img = document.createElement("img"); img.src = e.target.result; img.alt = "照片"; // 添加图片点击事件处理函数 img.onclick = function () { if (!img.hasAttribute("data-clicked")) { // 第一次点击时添加data-clicked属性,避免重复创建悬浮窗 img.setAttribute("data-clicked", "true"); } else { if (!popup) { createPopup(img.src); // 点击图片放大时创建悬浮窗 } } }; // 隐藏原始的input元素 input.style.display = "none"; // 添加图片到input元素的父节点 input.parentNode.appendChild(img); }; reader.readAsDataURL(input.files[0]); } } function createPopup(src) { popup = document.createElement("div"); popup.style.position = "fixed"; popup.style.top = "50%"; popup.style.left = "50%"; popup.style.transform = "translate(-50%, -50%)"; popup.style.backgroundColor = "rgba(0, 0, 0, 0.8)"; popup.style.zIndex = "9999"; popup.style.width = "75%"; // 设置悬浮窗宽度为页面宽度的75% popup.style.height = "75%"; // 设置悬浮窗高度为页面高度的75% var img = document.createElement("img"); img.src = src; img.alt = "放大照片"; img.style.maxWidth = "100%"; img.style.maxHeight = "100%"; var scale = 1; // 初始缩放比例 var scaleFactor = 0.1; // 每次滚动的缩放因子 // 鼠标滚轮事件 img.onwheel = function (e) { e.preventDefault(); // 阻止默认滚轮行为处理页面滚动 scale += e.deltaY > 0 ? -scaleFactor : scaleFactor; // 根据滚轮滚动方向确定缩放比例 scale = Math.max(scale, 0.1); // 最小缩放比例为0.1 img.style.transform = `scale(${scale})`; }; popup.appendChild(img); // 关闭悬浮窗 popup.onclick = function () { document.body.removeChild(popup); popup = null; // 清空popup变量,以便下次点击时重新创建悬浮窗 }; document.body.appendChild(popup); } ``` 在上述代码中,我们将创建悬浮窗的代码从`showPopup`函数中提取出来,并放在了`createPopup`函数中。然后,在图片点击事件处理函数中,我们通过判断`popup`变量是否存在来决定是否需要创建悬浮窗。只有当点击图片时,且`popup`变量为null时,才会执行`createPopup`函数来创建悬浮窗。 希望这次能满足您的需求!如有任何进一步的问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值