fabric 改变字体颜色 font改变字体颜色

newsfont.html


		/*超链接访问前，访问后样式一致*/
		a:link,a:visited{
			color:#0044ff;
			text-decoration:none;
		}
		a:hover{
			color:#ff8800;
		}
		
		#newstext{
				
			width:500px;
			border:#00ff00 1px solid;
			padding:10px;
		}
		
		/*预定义一些样式封装到选择器。一般使用类选择器。*/
		.norm{
			color:#000000;
			font-size:16px;
			background-color:#cdd8d0;
		}
		.max{
			color:#808080;
			font-size:28px;
			background-color:#9ce9b4;
		}
		.min{
			color:#ffffff;
			font-size:12px;
			background-color:#f1b96d;
		}
		
		
	
  
  
  
  	<script type="text/javascript">
  		//需求：改变字体的大小、颜色等
  		
  		//方法一：
		function changeFont2(size,clr){
			/*
			 * 既然要对div newstext中的文本字体进行操作。
			 * 必须要先获取div节点对象。
			 * 
			 */
			
			var oNewsText = document.getElementById("newstext");
			
			//获取oNewText节点的style样式属性对象。
			oNewsText.style.fontSize = size;
			oNewsText.style.color = clr;
		}
  		
  		/*
		 * 如果根据用户点击所需要的效果不唯一。
		 * 仅通过传递多个参数虽然可以实现效果，
		 * 但是
		 * 1，传参过多，阅读性差，
		 * 2，js代码和css代码耦合性高。
		 * 3，不利于扩展。
		 * 
		 * 解决：
		 * 将多个所需的样式进行封装。 
		 * 封装到选择器中，只要给指定的标签加载不同的而选择器就可以了。
		 */
		 //方法二：
  		function changeFont(selectorName){
  			var newsText=document.getElementById("newstext");
  			newsText.className=selectorName;
  		}
  	</script>
  	
  	
   
   
  	大字体 
	中字体 
	小字体
	
   
   
    
    
	这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
	这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
	这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
	这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
	这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
	这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
	这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
	这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
	这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
	这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
	这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
	这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容