相关疑难解决方法(0)

如何检查jQuery中是否隐藏了一个元素?

是可能的切换元件的可见性,使用函数.hide(),.show().toggle().

如何测试元素是可见还是隐藏?

javascript jquery dom visibility

7481
推荐指数
53
解决办法
255万
查看次数

检查元素是否在屏幕上可见

可能重复:
jQuery - 滚动后检查元素是否可见

我正在尝试确定元素是否在屏幕上可见.为了达到这个目的,我试图使用offsetTop找到元素的垂直位置,但返回的值不正确.在这种情况下,除非向下滚动,否则元素不可见.但是尽管如此,当我的屏幕高度为703时,offsetTop返回值618,因此根据offsetTop,元素应该是可见的.

我正在使用的代码如下所示:

function posY(obj)
{
  var curtop = 0;

  if( obj.offsetParent )
  {
    while(1)
    {
      curtop += obj.offsetTop;

      if( !obj.offsetParent )
      {
        break;
      }

      obj = obj.offsetParent;
    }
  } else if( obj.y )
    {
     curtop += obj.y;
    }

  return curtop;
}
Run Code Online (Sandbox Code Playgroud)

先感谢您!

javascript position offset

66
推荐指数
2
解决办法
13万
查看次数

弹出窗口部分显示在浏览器窗口之外

我正在使用 CSS 在我的页面上创建一个弹出窗口。我的标签内有一个设置为 display:none; 的内容。然后,当您将鼠标悬停在标签上时,会弹出该单词的定义。这对我来说效果很好,但是有时弹出窗口出现在浏览器窗口之外。有没有办法使用 CSS 确保整个弹出窗口保留在浏览器窗口内,或者我需要添加一些 Javascript?我真的希望弹出窗口出现在链接的位置,但我不在乎它是否向左或向右移动以便位于窗口内并可见。

这是我的代码:

a span {
display: none;
}

a:hover span {
display: block;
position: absolute;
width: 300px;
z-index: 1000;
}
Run Code Online (Sandbox Code Playgroud)

预先感谢您的帮助!:-)

css css-position

5
推荐指数
1
解决办法
1万
查看次数

如何检查元素是否在屏幕上完全可见?

我在 OS X 上使用 Selenium WebDriver 和 Chrome 驱动程序,在 Python 中实现。

我正在尝试编写一个测试来验证各种 HTML 元素是否完全在屏幕上(例如,我有一个标签云,并且由于我的实施不佳,有时某些词会从浏览器的边缘滑落窗口,所以它们是半可见的)。

driver.find_element_by_css_selector("div.someclass").is_displayed(),这是我可以在其他地方找到的唯一解决方案,似乎不起作用;即使元素部分可见,它也会返回 True 。

有没有办法可以检查整个元素(包括填充等)在标准浏览器视口中是否可见?

我正在用 Python 实现,所以 Python 风格的答案将是最有用的。

html python selenium unit-testing selenium-webdriver

5
推荐指数
1
解决办法
3801
查看次数

如何根据页面位置更改导航链接颜色

嗨,我正在努力研究如何让我的粘性导航链接在到达页面上的特定部分时更改滚动颜色。目前我已经设置好了,当点击导航链接时,滚动动画会将您带到页面上的特定部分,并向链接添加一个活动类(更改为红色)。当滚动到其部分时,我只想将活动链接更改为红色。这是我目前的标记。

谢谢

 $("#nav-item-1").click(function () {
    $('html, body').animate({
      scrollTop: $("#section1").offset().top
    }, 2000);
  });
  $("#nav-item-2").click(function () {
    $('html, body').animate({
      scrollTop: $("#section2").offset().top
    }, 2000);
  });
  $("#nav-item-3").click(function () {
    $('html, body').animate({
      scrollTop: $("#section3").offset().top
    }, 2000);
  });
  $("#nav-item-4").click(function () {
    $('html, body').animate({
      scrollTop: $("#section4").offset().top
    }, 2000);
  });

  $("#nav-item-1").click(function () {
    $("a").removeClass('active');
    $("#nav-item-1").addClass('active');
  });
  $("#nav-item-2").click(function () {
    $("a").removeClass('active');
    $("#nav-item-2").addClass('active');
  });
  $("#nav-item-3").click(function () {
    $("a").removeClass('active');
    $("#nav-item-3").addClass('active');
  });
  $("#nav-item-4").click(function () {
    $("a").removeClass('active');
    $("#nav-item-4").addClass('active');
  });
Run Code Online (Sandbox Code Playgroud)
    * {
      padding: 0;
      margin: 0;
    }
    
    .active {
      color: red;
    }
    
    .container { …
Run Code Online (Sandbox Code Playgroud)

html jquery

1
推荐指数
1
解决办法
4014
查看次数