使用 Javascript IF 语句检查 style.width [重复]答案

【问题标题】：Checking style.width with Javascript IF statement [duplicate]使用 Javascript IF 语句检查 style.width [重复]
【发布时间】：2021-06-08 19:06:56
【问题描述】：

我需要用 js if 语句检查 style.width。但它不起作用。我该怎么做？

我的 if 代码：

if (document.getElementById("XXX").style.width == "100%")
{

}

【问题讨论】：

代码看起来不错，你确定要比较的元素是正确的（不是错字/未定义的内容）吗？
如果 id 为“XXX”的元素的宽度明确定义为“100%”，它应该可以工作。如果元素未定义，则应出现错误“无法读取未定义的属性样式”。我认为元素的样式不是 { width: 100% }。
先控制台
我在一个函数中运行这个 if 块，由另一个函数调用。会不会造成这种情况？
是在样式表中设置width（在文档的<head> 或其他地方）还是使用style="width: 100%" 使用内联style 属性设置？如果在style 属性中设置了它，那么您的代码应该可以工作（尽管编写它并没有做任何事情，您是否在脚本中添加了else { //do something else } 条件？如果它是使用样式表设置的，那么您需要使用window.getComputedStyle(document.getElementById('XXX'), null).width检索宽度，虽然它将以像素为单位返回，而不是字符串100%。

标签： javascript html css

【解决方案1】：

由于“宽度”样式实际上可能为空（不存在），我也会亲自检查。

var elm_width = document.getElementById("XXX").style.width;
if(elm_width && elm_width == "100%"){
  ...
}

甚至，取决于脚本流程...

var elm_width = document.getElementById("XXX").style.width;

if(elm_width){
  if(elm_width == "100%"){
    ...
  }
}else{
  console.error('No width for element');
}

注意：当然，这是如果您需要实际的 CSS 宽度。如果要获取可视元素宽度，如前所述，还有其他 JS 方法。

【讨论】：