zoukankan      html  css  js  c++  java
  • 每天一个JavaScript实例-展示设置和获取CSS样式设置

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>每天一个JavaScript实例-展示设置和获取CSS样式设置</title>
    <style>
    	#date{
    		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>
    

  • 相关阅读:
    查看JAVA的class二进制文件的方法
    常见算法整理(二)
    常见算法整理(一)
    JAVA的Spring注入机制事例详解
    Spring的PropertyPlaceholderConfigurer事例应用
    eclipse 使用总结
    Mysql的union
    filter中的DelegatingFilterProxy使用事例
    Spring组件扫描<context:component-scan/>详解
    JAVA 注解的几大作用及使用方法详解
  • 原文地址:https://www.cnblogs.com/mthoutai/p/6806714.html
Copyright © 2011-2022 走看看