Tham khảo tài liệu 'creating applications with mozilla-chapter 5. scripting mozilla- p3', công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả | Chapter 5. Scripting Mozilla- P3 . Changing an Element s CSS Style Using JavaScript Much of what makes the Mozilla UI both flexible and programmable is its ability to dynamically alter the CSS style rules for elements at runtime. For example if you have a button you can toggle its visibility by using a simple combination of JavaScript and CSS. Given a basic set of buttons like this button id somebutton class testButton label foo spacer flex 1 button id ctlbutton class testButton label make disappear oncommand disappear as well as a stylesheet import statement at the top of the XUL like this xml-stylesheet href type text css and a simple CSS file in your chrome xfly content directory called that contains the following style rule somebutton hidden true display none .testButton border 1px outset cccccc background-color cccccc padding 4px margin 50px You can call setAttribute in your script to hide the button at runtime. script function disappear return somebutton .setAttribute hidden true script The previous code snippet makes a visible button disappear by setting its hidden attribute to true. Adding a few more lines you can toggle the visibility of the button also making it appear if it is hidden script function disappear const defaultLabel make disappear const newLabel make reappear var button somebutton var ctlButton ctlbutton if hidden hidden true label newLabel else hidden label defaultLabel return script Another useful application of this functionality is to collapse elements such as toolbars boxes and iframes in your application. The setAttribute method can also be used to update the element s class attribute with which style rules are so often associated. toolbarbutton-1 and button-toolbar are two different classes of button. You can change a button from a .
