测试元素的style属性和JavaScript中的css值有区别吗？

Question

我正在尝试创建一个单页网站，每侧使用箭头按钮滚动到不同的伪页面。左箭头具有CSS值visibility: hidden;，因此使用不会滚动到空白区域。一旦用户向右滚动，该按钮就变得可见，但是当用户滚动回到“主页”时我想再次隐藏它。我正在使用jQuery来测试left属性，如下所示：

if($('#box').css('left') == '0%') {
    $('.left').css('visibility', 'hidden');
}

在Firefox上检查元素向我显示，当我希望按钮消失时，左侧值确实是0%，但它实际上显示在HTML标记中，如style="left: 0%;"，因为该值是由我用JavaScript编写的滚动机制。是否有不同的方法来测试这些style值与CSS样式表上的值？

Answer 1

将您的代码更改为以下内容：

 console.log('left is now = '+$('#box').css('left'))
 if($('#box').css('left') == '0%') {
   $('.left').css('visibility', 'hidden');
 }

这将为您提供三条信息：

1）你真的打了if语句吗？ 2）当它确实命中时，返回的实际值是多少（是的，你可能想尝试使用computedStyle） 3）是你所期望的价值。

有了这些信息，您可以快速调试问题。