一.DOM的style属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM的style属性</title> <style type="text/css"> span{ font-size: 16px; font-family: arial,helvetica,sans-serif; padding: 20px; } </style> <script type="text/javascript"> function toggle(){ var myElement = document.getElementById("id1"); if(myElement.style.backgroundColor =='red'){ //JavaScript不允许在属性或方法名称里使用连字符,因此需要删除连字符并将连字符后的字母大写 myElement.style.backgroundColor = 'yellow'; myElement.style.color = 'black'; }else{ myElement.style.backgroundColor = 'red'; myElement.style.color = 'white'; } } window.onload = function(){ document.getElementById("btn1").onclick = toggle; } </script> </head> <body> <span id="id1">welcome back to my site</span> <input type="button" id="btn1" value="toggle"> </body> </html>
二.使用className访问类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用className访问类</title> <style type="text/css"> .classA{ width: 180px; border: 3px solid black; background-color: white; color: red; font:normal 24px arial,helvetical,sans-serif; padding: 20px; } .classB{ width: 180px; border: 3px dotted black; background-color: gray; color: black; font:italic 24px "Time New Roman",serif; padding: 20px; } </style> <script type="text/javascript"> function toggleClass(){ var myElement = document.getElementById("id1"); if(myElement.className == "classA"){ myElement.className = "classB"; }else{ myElement.className = "calssA" } } window.onload = function(){ document.getElementById("btn1").onclick = toggleClass; } </script> </head> <body> <span id="id1" class="classA">An element with a touch of class</span> <input type="button" id="btn1" value="toggle"> </body> </html>
className获取class样式名
三.DOM里的styleSheets
1)document对象的styleSheets属性是一个数组. (2)styleSheets数组的项目是以数值索引,第一个出现的样式表索引是0
3)数组里的每个样式表都有一个属性disabled,true为禁用/false为开启
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM的styleSheets对象</title> <style type="text/css"> body{ background-color: white; color:red; font: normal 24px arial,helvetica,sans-serif; padding: 20px; } </style> <style type="text/css"> body{ background-color: black; color:gray; font: italic bold 24px "Tiems New Roman",serif; padding: 20px; } </style> <script type="text/javascript"> //用来判断是哪个样式表 var whichSheet = 0; //禁用第一个样式表 document.styleSheets[1].disabled = true; function sheet(){ document.styleSheets[whichSheet].disabled = true; //来回切换样式表 whichSheet = (whichSheet == 1) ?0:1; document.styleSheets[whichSheet].disabled = false; } window.onload = function(){ document.getElementById("btn1").onclick = sheet; } </script> </head> <body> <!-- 1)document对象的styleSheets属性是一个数组. (2)styleSheets数组的项目是以数值索引,第一个出现的样式表索引是0 3)数组里的每个样式表都有一个属性disabled true为禁用/false为开启 --> Switch my stylesheet with the button below! <br/> <input type="button" id="btn1" value="toggle"/> </body> </html>
切换样式:
