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

Question

I'm trying to make a single-page website that uses arrow buttons on each side to scroll to different pseudo-pages. The left arrow has the CSS value visibility: hidden; so that the use doesn't scroll into empty space. The button becomes visible once the user scrolls to the right, but I want to hide it again when the user scrolls back to the "homepage". I'm using jQuery to test the left attribute like so:

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

Inspect Element on Firefox shows me that the left value when I want the button to disappear is indeed 0% , but it actually appears in the HTML tag, as style="left: 0%;" , because the value is assigned by the scroll mechanism I coded in JavaScript. Is there a different way to test for these style values versus a value on a CSS stylesheet?

Answer 1

change your code to the following:

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

This will give you three pieces of information:

1) are you actually hitting that if statement 2) when it does hit, what is the actual value being returned (and yes you may want to try computedStyle) 3) is the value what you expected.

Armed with this info, you can quickly debug your problem.