每天一个JavaScript实例-展示设置和获取CSS样式设置
Posted mthoutai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了每天一个JavaScript实例-展示设置和获取CSS样式设置相关的知识，希望对你有一定的参考价值。
<!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样式设置的主要内容，如果未能解决你的问题，请参考以下文章