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

最新推荐文章于 2024-04-20 20:25:59 发布

learning_code_blog

最新推荐文章于 2024-04-20 20:25:59 发布

阅读量3.1k

点赞数

分类专栏： javascript JavaScript实例 Java学习之路文章标签： HTML javascript

本文链接：https://blog.csdn.net/yangxin_blog/article/details/49105977

版权

Java学习之路同时被 3 个专栏收录

47 篇文章 3 订阅

订阅专栏

javascript

14 篇文章 0 订阅

订阅专栏

JavaScript实例

14 篇文章 1 订阅

订阅专栏

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

需求：通过点击图标的上面的文字，来修改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)" οnclick="changfont(20,'red')">大字体</a>
  	<a href="javascript:void(0)" οnclick="changfont(15,'blue')">中字体</a>
  	<a href="javascript:void(0)" οnclick="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>

点击前：

点击后：

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

<h1>这是java的简单介绍22</h1>
	
  	<a href="javascript:void(0)" οnclick="changfont2('max')">大字体</a>
  	<a href="javascript:void(0)" οnclick="changfont2('mid')">中字体</a>
  	<a href="javascript:void(0)" οnclick="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";
		}

点击前：

点击后：

learning_code_blog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录