Đang chuẩn bị liên kết để tải về tài liệu:
Publishing AJAX and PHP - part 5

Client-Side Techniques with Smarter JavaScript Product Name Airplane Big car 3. Create a file called csstest.js and write the following code in it: // Change table style to style 1 function setStyle1() { // obtain references to HTML elements oTable = document.getElementById("table"); oTableHead = document.getElementById("tableHead"); oTableFirstLine = document.getElementById("tableFirstLine"); oTableSecondLine = document.getElementById("tableSecondLine"); // set styles oTable.className = "Table1"; oTableHead.className = "TableHead1"; oTableFirstLine.className = "TableContent1"; oTableSecondLine.className = "TableContent1"; } // Change table style to style 2 function. | Client-Side Techniques with Smarter JavaScript body table id table tr th id tableHead Product Name th tr tr td id tableFirstLine Ai rplane td tr tr td id tableSecondLine Big car td tr table br input type button value Set Style 1 onclick setStyle1 input type button value Set Style 2 onclick setStyle2 body html 3. Create a file called csstest.js and write the following code in it Change table style to style 1 function setStyle1 obtain references to HTML elements oTable document.getElementByld table oTableHead document.getElementByld tableHead oTableFirstLine document.getElementByld tableFirstLine oTableSecondLine document.getElementByld tableSecondLine set styles oTable.className Table1 oTableHead.className TableHead1 oTableFirstLine.className TableContent1 oTableSecondLine.className TableContent1 Change table style to style 2 function setStyle2 obtain references to HTML elements oTable document.getElementByld table oTableHead document.getElementByld tableHead oTableFirstLine document.getElementByld tableFirstLine oTableSecondLine document.getElementByld tableSecondLine set styles oTable.className Table2 oTableHead.className TableHead2 oTableFirstLine.className TableContent2 oTableSecondLine.className TableContent2 4. Finally create the CSS file styles .css .Table1 border DarkGreen 1px solid background-color LightGreen .TableHead1 font-family Verdana Arial font-weight bold 40 Chapter 2 font-size 10pt .TableContentl font-family Verdana Arial font-size 10pt .Table2 border DarkBlue lpx solid background-color LightBlue .TableHead2 font-family Verdana Arial font-weight bold font-size 10pt .TableContent2 font-family Verdana Arial font-size 10pt 5. Load http localhost ajax foundations css css .html in your web browser and test that your buttons work as they should. Figure 2.5 Table with CSS and JavaScript What Just Happened Your styles .css file contains two sets of styles that can be applied to the table in csstest.html. When the user clicks one of the Set Style buttons .