【DOM】2.改变新闻字体大小

来源：互联网发布：如何整理mac里的照片编辑：程序博客网时间：2024/05/18 00:27

案例：改变新闻字体的大小，提供大、中、小三种字体的选择
思路：
- HTML，定义页面的基本结构
- CSS，定义页面的样式
- 确定事件源（超链接）和事件（点击）onclick
- 注意：超链接有默认的事件处理，但该案例中不需要其默认事件处理，取消默认效果：href=”javascript:void(0)”，什么都不返回。
- js，定义处理方式的具体内容，在处理方式中必须要明确被处理的节点，因为要获取该节点对象，并调用其属性和行为，完成处理。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title> MyHTML</title>    <style type="text/css">        #allarea {            border: dotted 1px;            width: 700px;            padding: 20px;        }        /*对超链接未访问状态和访问后的状态设置相同的样式*/        #allarea a:LINK,#allarea a:VISITED {            color: blue;            text-decoration: none;        }        /*设置超链接悬停样式 */        #allarea a:HOVER {            color: purple;        }    </style>    <script type="text/javascript">        function changeDemo(size) {            var newsText = document.getElementById("newstext");            newsText.style.fontSize = size;            //样式和代码耦合性太强        }    </script></head><body>      <div id="allarea">        <h1>新闻标题</h1>        <a href="javascript:void(0)" onclick="changeDemo('24px')">大字体</a>        <a href="javascript:void(0)" onclick="changeDemo('16px')">中字体</a>        <a href="javascript:void(0)" onclick="changeDemo('13px')">小字体</a>        <hr>        <div id="newstext">        新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容        新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容        新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容        新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容        新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容        新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容        </div>    </div></body></html>

这里写图片描述

优化上述代码
改变多样式时，先将样式进行性封装，封装到指定选择器中。
这里采用类选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title> MyHTML</title>    <style type="text/css">        #allarea {            border: dotted 1px;            width: 700px;            padding: 20px;        }        /*对超链接未访问状态和访问后的状态设置相同的样式*/        #allarea a:LINK,#allarea a:VISITED {            color: blue;            text-decoration: none;        }        /*设置超链接悬停样式 */        #allarea a:HOVER {            color: purple;        }        /*预先定义好样式*/        .maxfont {            font-size: 26px;            color: white;            background-color: black;        }        .normfont {            font-size: 16px;            color: black;            background-color: white;        }        .minfont {            font-size: 13px;            color: red;            background-color: black;        }           </style>    <script type="text/javascript">        function changeDemo(values) {            var newsText = document.getElementById("newstext");            newsText.className = values;        }    </script></head><body>      <div id="allarea">        <h1>新闻标题</h1>        <a href="javascript:void(0)" onclick="changeDemo('maxfont')">大字体</a>        <a href="javascript:void(0)" onclick="changeDemo('normfont')">中字体</a>        <a href="javascript:void(0)" onclick="changeDemo('minfont')">小字体</a>        <hr>        <div id="newstext" class="normfont">        新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容        新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容        新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容        新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容        新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容        新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容        </div>    </div></body></html>

这里写图片描述

1 0