每天一個JavaScript實例-展示設置和獲取CSS樣式設置
阿新 • • 發佈:2017-05-04
width func height nts style scrip meta on() 屬性
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一個JavaScript實例-展示設置和獲取CSS樣式設置</title> <style> #date{ width:200px; background-color:lime; } </style> <script> function getStyle(date,cssprop,cssprop2){ //IE if(date.currentStyle){ return date.currentStyle[cssprop]; }else if(document.defaultView && document.defaultView.getComputedStyle){ //console.log(document.defaultView.getComputedStyle(date,null).getPropertyValue(cssprop)); return document.defaultView.getComputedStyle(date,null).getPropertyValue(cssprop2); }else{ return null; } } window.onload = function(){ var date = document.getElementById("date"); var color = getStyle(date,"background-color","background-color"); console.log(color); date.style.width= "500px"; date.style.backgroundColor= "yellow"; console.log(date.style.width); console.log(date.style.backgroundColor); //數組表示法 date.style["fontFamily"] = "courier"; //展示覆蓋屬性 var style = date.getAttribute("style"); console.log(style); date.setAttribute("style","height:100px"); console.log(document.defaultView.getComputedStyle(date,null).getPropertyValue("fontFamily"));//null console.log(document.defaultView.getComputedStyle(date,null).getPropertyValue("font-family"));//STHeiti var style = date.getAttribute("style"); //date.style["fontFamily"]="微軟雅黑"; var font = getStyle(date,"fontFamily","font-family"); //console.log(font); } </script> </head> <body> <div id = "date" style="color:purple"> aa </div> </body> </html>
每天一個JavaScript實例-展示設置和獲取CSS樣式設置