JS完成改变新闻字体大中小的显示

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    

    <title>My JSP 'index.jsp' starting page</title>

	<meta http-equiv="pragma" content="no-cache">

	<meta http-equiv="cache-control" content="no-cache">

	<meta http-equiv="expires" content="0">    

	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

	<meta http-equiv="description" content="This is my page">

	<!--

	<link rel="stylesheet" type="text/css" href="styles.css">

	-->

	<script type="text/javascript">

		function changeStyle(style){

			alert(style);

			var divNode = document.getElementById("newsid");

			divNode.className = style;

		}

		

	</script>

	<style type="text/css">

		.fontBig{

			color: #0000CC;

			font-size:24px; 

			font-family: serif;

		}

		.fontMedi{

			color: #FF0000;

			font-size: 16px;

			font-family: sans-serif;

		}

		.fontSmall{

			color: yellow;

			font-size: 4px;

			font-family: inherit;

		}

	</style>

  </head>

  

  <body>

  	<H2>新闻标题</H2>  <br/>

  	<a href="javascript:void(0)" onclick="changeStyle('fontBig')">大字体</a>  ||

  	<a href="javascript:void(0)" onclick="changeStyle('fontMedi')">中字体</a>  ||

  	<a href="javascript:void(0)" onclick="changeStyle('fontSmall')">小字体</a>  <br/>

  	<div id="newsid" >

  		新闻新闻新闻新闻新闻<br/>新闻新闻新闻新闻新闻

  	</div>

  	

  	<input type="button" onclick="demo()" value="点点">

  </body>

</html>

  

 

你可能感兴趣的:(js)