html中通过文字控制文本的颜色和字体(简单演示)

在实际中,我们可能需要通过部分文字或者按钮,改变文本的字体和颜色,这里简单的演示:

需求:通过点击图标的上面的文字,来修改div标签里面文字, 设置一个<a>标签
基本上就是传参和导入css
1,首先对要操作的对象 获得元素节点,然后给元素节点属性进行相应的赋值
2,aa.style.fontSize=size+'px';  //这是对传参数
var aa=document.getElementById("newsid1");
aa.className=size;//class="size";//这是对css导入

<span style="font-size:18px;"><body>
  	<h2>这是java的简单介绍</h2>
	
  	<a href="javascript:void(0)" onclick="changfont(20,'red')">大字体</a>
  	<a href="javascript:void(0)" onclick="changfont(15,'blue')">中字体</a>
  	<a href="javascript:void(0)" onclick="changfont(20,'#00ff00')" >小字体</a>
   <div id="newsid">Java是由Sun Microsystems公司推出的Java面向对象程序设计语言(以下简称Java语言)和Java平台的总称。Java
Java,由James Gosling和同事们共同研发,并在1995年正式推出。Java最初被称为Oak,是1991年为消费类电子产品的嵌入式芯片而设计的。
1995年更名为Java,并重新设计用于开发Internet应用程序。用Java实现的HotJava浏览器(支持Java applet)
显示了Java的魅力:跨平台、动态Web、Internet计算。从此,Java被广泛接受并推动了Web的迅速发展,常用的浏览器均支持Javaapplet。
另一方面,Java技术也不断更新。Java自面世后就非常流行,发展迅速,对C++语言形成有力冲击。在全球云计算和移动互联网的产业环境下,
Java更具备了显著优势和广阔前景.2010年Oracle公司收购Sun Microsystems[1]。
	</div></span>
通过 这些传参的方式来控制:

<span style="font-size:18px;"><script type="text/javascript">
		//直接传参数进来
		function changfont(size,color1){
			var aa=document.getElementById("newsid");
			aa.style.fontSize=size+'px';
			aa.style.backgroundColor=color1;
		}</span>
点击 前:

html中通过文字控制文本的颜色和字体(简单演示)_第1张图片

点击后:

html中通过文字控制文本的颜色和字体(简单演示)_第2张图片

方式二:采用css导入改变样式

<h1>这是java的简单介绍22</h1>
	
  	<a href="javascript:void(0)" onclick="changfont2('max')">大字体</a>
  	<a href="javascript:void(0)" onclick="changfont2('mid')">中字体</a>
  	<a href="javascript:void(0)" onclick="changfont2('min')" >小字体</a>
   <div id="newsid1">Java是由Sun Microsystems公司推出的Java面向对象程序设计语言(以下简称Java语言)和Java平台的总称。Java
Java,由James Gosling和同事们共同研发,并在1995年正式推出。Java最初被称为Oak,是1991年为消费类电子产品的嵌入式芯片而设计的。
1995年更名为Java,并重新设计用于开发Internet应用程序。用Java实现的HotJava浏览器(支持Java applet)
显示了Java的魅力:跨平台、动态Web、Internet计算。从此,Java被广泛接受并推动了Web的迅速发展,常用的浏览器均支持Javaapplet。
另一方面,Java技术也不断更新。Java自面世后就非常流行,发展迅速,对C++语言形成有力冲击。在全球云计算和移动互联网的产业环境下,
Java更具备了显著优势和广阔前景.2010年Oracle公司收购Sun Microsystems[1]。
	</div>
通过这个控制,传参就不一样了

//通过导入css模式来测试
		function changfont2(size){
			var aa=document.getElementById("newsid1");
			aa.className=size;//class="size";
		}
		
点击前:

html中通过文字控制文本的颜色和字体(简单演示)_第3张图片

点击后:

html中通过文字控制文本的颜色和字体(简单演示)_第4张图片


你可能感兴趣的:(JavaScript,html)