每天一个JavaScript实例-展示设置和获取CSS样式设置
2017-05-04 13:51
841 查看
<!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样式设置
- 每天一个JavaScript实例-SVG中的javaScript展示
- 每天一个JavaScript实例-获取元素当前高度
- 每天一个JavaScript实例-获取元素当前高度
- Javascript实例教程:querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素,如果没有匹配的元素则返回null。
- 仿Word自动套用格式使用CSS设置表格样式实例
- JavaScript(21)jQuery - 获取并设置 CSS 类、尺寸
- 一个CSS文件内如何设置多个body及多个DIV样式,并给出页面如何调用
- Javascript操作table,tr,td和表格CSS样式设置小常识
- 每天一个JavaScript实例-html5拖拽
- 每天一个JavaScript实例-去除字符串末尾的空白
- 每天一个JavaScript实例-使用循环和分割来替换和删除元素
- 每天一个JavaScript实例-分割字符串
- javascript 获取元素的真实,最终的css样式
- 每天一个JavaScript实例-apply和call的用法
- 每天一个JavaScript实例-防止重复表单提交
- 给所有浏览器的元素设置了一个共同的样式:Normalize.css
- 每天一个JavaScript实例-标量参数和数组参数的功能性区别
- 【自定义Joomla样式】Joomla2.5 为article添加一个cssflag字段控制页面展示时引用不同的自定义css
- javascript Camel记号 获取和设置元素CSS样式信息的CSS属性值