新闻页面改变字体（DHTML）

最新推荐文章于 2023-09-23 07:34:05 发布

原创最新推荐文章于 2023-09-23 07:34:05 发布 · 619 阅读

0 ·

CC 4.0 BY-SA版权

DHTML 专栏收录该内容

2 篇文章

订阅专栏

这篇博客探讨了如何通过DOM（Document Object Model）来改变新闻页面的字体和样式属性，实现动态交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新闻页面改变字体和利用dom改变属性的值

<!DOCTYPE html>
<html>
<head>
<title>News.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 
1.定义数据封装的标签。（定义界面）
2.确定时间源。
3.注册事件。
4.时间处理。

需求：
页面中有一个新闻区域：
通过超链接  大 中  小
可以要用户自己改变字体的大小。
 -->
 
<script type="text/javascript">
/* 
     function changeMax(){
         var divNode = document.getElementById("newsid");
         divNode.style.fontSize = "36px";
     }
     */
     
     function changeSize1(size){
         var divNode = document.getElementById("newsid");
         divNode.style.fontSize = size;
     }
     function changeSize2(className){
         var divNode =document.getElementById("newsid");
         divNode.className = className;
     }
</script>
<style type="text/css">
.norm{
      background-color: #66FF00;
      color:#FF0000;
      font-size:24px;
} 

.max{
       background-color: #CCCCCC;
       color:#000000;
       font-size:36px;
}
.min{
       background-color: #66CCFF;
       color:#CC6600;
       font-size:16px;
}
</style>
</head>
<body>
	<div id="newsid"  class="norm"  >
<a href="javascript:void(0)"  onclick="changeSize2('max')">大</a><br/>
<a href="javascript:void(0)"  onclick="changeSize2('norm')">中</a><br/>
<a href="javascript:void(0)"  onclick="changeSize2('min')">小</a><br/>
<h2>新闻标题</h2>
		<p>其实利用3D技术进行医学上的面部修复，早在去年就已经获得成功。在当时，Oxford Performance
			Materials利用3D打印的植入物去替代一个病人的75％头骨。这个试验的成功，为移植其它骨骼奠定了基础，这也为最近FDA批准Oxford特定面部设
			埋下了伏笔。生物相容性很好的植入物在物理上很像真正的骨头，这还不是3D打印植入物真正革命的地方，它更大的魅力则是能够创建匹配每个病人的特定骨骼，从一定程度上降低了病人重建面部复杂但又不得不进行各种流程的成本。由于植入物可以非常迅速
			地创建起来，这也能让病人可以尽快得到宜早不宜迟的手术。</p>




	</div>
</body>
</html>

利用dom改变样式，以及属性的值。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Dom.html</title>

<style type="text/css">
.font1{
    color:#0000CC;
}
.font2{
     color:#FF0000;
}
</style>
<script type="text/javascript">
 var b = true;
 function demo()
 {
      var obj = document.getElementById("divid");
      if(b)
                             {
                                 obj.className="font1";
                                 b=false;
                             }
                             
                             else
                             {
                                 obj.className="font2";
                                 b=true;
                             }
 }
  function demo2()
 {
      var obj = document.getElementById("divid");
      obj.innerText="11111";
 }                           
</script>
 
</head>

<body>
        <input type="button"  value="变色" onclick="demo()"/>
        <div   id="divid">
           <h1>haha</h1> 
        </div>
         <input type="button"  value="变内容" onclick="demo2()"/>
</body>
</html>