Question

我试图让我的脚本只在一个页面上更改元素的样式。我想也许最好的方法是检测并查看页面是否有唯一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
}

谢谢！

Answer 1

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

Answer 2

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 */

Answer 3

你应该能够做到

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，并且不会调用其中的代码。

Answer 4

由于元素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
}

Answer 5

你说课，对吗？然后改变

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

到

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

Javascript：如果存在一个类，如何修改类的属性？

5 个答案: