tailieunhanh - Practical prototype and scipt.aculo.us part 22

Practical prototype and part 22: The information in this book is distributed on an "as is" basis, without warranty Although every pre-caution has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work. | 116 CHAPTER 6 WORKING WITH THE DOM Both methods are idempotent calling them more than once in a row has the same effect as calling them just once. So you don t need to check whether an element is visible before you hide it. Nonetheless an easy way to figure out the display state of an element is to use Element visible - false - true Element visible simply reports on the element s CSS display returning true if it s set to none. Now imagine using all three of these methods to write code that will switch an element between visible and hidden if else You don t have to imagine it actually because Prototype does it for you with a method called Element toggle - true - false - true Element toggle is a handy abstraction for elements that should have their display state toggled each time an event . a click is triggered. HTML div class news-item id item_1 h3 Declaration of Independence span id toggle_1 Hide Show span h3 p id summary_1 When in the course of human events it becomes necessary for one people to dissolve the political bonds which have connected them with another and to assume among the powers of the earth the separate and equal station to which the laws of nature and of nature s God entitle them a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation. p div JavaScript toggle_1 .observe click function summary_1 .toggle CHAPTER 6 WORKING WITH THE DOM 117 With the preceding markup this one line of code toggles the visibility of the paragraph of text every time the span is clicked. In other words items with expanded and collapsed states are perfect for Element toggle. The addClassName removeClassName hasClassName and toggleClassName Methods Showing and hiding elements is handy. But what if we want to do more with CSS It s remarkably easy to style elements .