Trường hợp JavaScript tuyên bố tiếp theo xảy ra trong trang của bạn phụ thuộc vào mã của bạn. Nếu bạn có mã trong trang khác hơn là một chức năng hoặc mã kết nối với một sự kiện Nếu trình duyệt Firefox, bạn sử dụng một vòng lặp để đi qua mảng bổ sung đối tượng hoa | Chapter 13 Dynamic HTML in Modern Browsers width 24px border 1px solid 316AC5 background-color C1D2EE padding 2px cursor pointer You ve already seen the first three properties they were used in the toolbar-button class. Next a blue border one pixel in width is added to the element and the background color is changed to a light blue. The padding is decreased to two pixels. You do this because padding and borders add extra height and width to the HTML element. Take a look at Figure 13-15 which illustrates this concept. Padding div Both elements 30 pixels in height and width Figure 13-15 This is a side-by-side comparison of the toolbar-button and toolbar-button-hover classes. The toolbar-button class is 24 pixels in height and width plus three pixels of padding per side. That makes toolbar-button 30 pixels in height and width. The toolbar-button-hover class starts with the same 24 pixels in height and width. You then add a one-pixel border which adds two pixels to the height and width. Then you add two pixels of padding on each side which makes toolbar-button-hover 30 pixels in height and width just like toolbarbutton. If you used three pixels of padding instead of two in toolbar-button-hover the button would grow in size when the mouse pointer hovered over it as Figure 13-16 shows. 530 Chapter 13 Dynamic HTML in Modern Browsers Padding Border Padding div 30px Figure 13-16 32px Let s take a second and look at these two rules. Notice that each has three properties with the same values display height and width . You can take these properties out and write a new rule for all span elements inside the toolbar. .toolbar span display inline-block height 24px width 24px You can now slim down the toolbar-button and toolbar-button-hover classes .toolbar-button padding 3px .toolbar-button-hover border 1px solid 316AC5 background-color C1D2EE padding 2px cursor pointer By making this change you can easily add style that is shared by both states. The last property we ll discuss .
