0

我试图让我的脚本只在一页上更改元素的样式。我认为这样做的最佳方法可能是检测并查看页面是否存在唯一的 id ( profile-advanced-details)，如果有，则将另一个 id ( page-body) 高度修改为 1500px。

我已经尝试过了，但它似乎不起作用......我的语法错误吗？还是有更好的方法来做到这一点？

var wrap = document.getElementById("page-body");

if (!document.getElementsById('profile-advanced-details').length){
  return;  //if profile-advanced-details doesn't exist, do nothing
}

else {
  wrap.style.height = "1500px";//if it does exist, change the height of page-body
}

谢谢！

4

5 回答 5

0

getElementById是单数，不是复数。您也不需要.length，因为它的含义因节点而异。

if( document.getElementById('profile-advanced-details')) {
  document.getElementById('page-body').style.height = "1500px";
}

您也可以使用 CSS，但前提是参考元素（“profile-advanced-details”）位于目标（“page-body”）之前。这可能不是这里的情况，但这是一个很好的技巧：

#profile-advanced-details + #page-body,
    #profile-advanced-details + * page-body {height:1500px}
/* the following may work in CSS4: */
!#page-body #profile-advanced-details,
    !#page_body + #profile-advanced-details,
    !#page_body + * #profile-advanced-details {height:1500px}
$#page-body #profile-advanced-details,
    $#page_body + #profile-advanced-details,
    $#page_body + * #profile-advanced-details {height:1500px}
#page-body! #profile-advanced-details,
    #page_body! + #profile-advanced-details,
    #page_body! + * #profile-advanced-details {height:1500px}
#page-body$ #profile-advanced-details,
    #page_body$ + #profile-advanced-details,
    #page_body$ + * #profile-advanced-details {height:1500px}
/* The different ones are partially because I don't remember the spec,
          but mostly because it's changing */
于 2012-12-22T17:03:16.570 回答
0

你应该能够做到

var wrap = document.getElementById("page-body");

if (document.getElementById('profile-advanced-details')){
    // profile-advanced-details does exist
    wrap.style.height = "1500px";
}

这是因为“profile-advanced-details”的 getElementById 将在不存在时返回 null，这意味着条件不会评估为 true，并且不会调用其中的代码。

于 2012-12-22T17:03:34.607 回答
0

由于元素 id 是唯一的，因此您应该为元素指定类名'profile-advanced-details'并使用它document.getElementsByClassName来检查是否存在

因此，使用您提供的代码将如下所示：

var wrap = document.getElementById("page-body");

if (document.getElementsByClassName('profile-advanced-details').length == 0){
  return;  //if profile-advanced-details doesn't exist, do nothing
}

else {
  wrap.style.height = "1500px";//if it does exist, change the height of page-body
}
于 2012-12-22T17:04:30.703 回答
0

你说上课，对吧？然后改变

         if (!document.getElementsById('profile-advanced-details').length)

至

         if (!document.getElementByClass('profile-advanced-details').length)
于 2012-12-22T17:07:04.100 回答
0

ids 是独一无二的。没有这样的方法document.getElementsById()。改为使用document.getElementById()，这将返回具有指定id或. 的元素null。

于 2012-12-22T17:00:24.283 回答