关于Web(通过点击切换新闻字体)

最新推荐文章于 2021-06-09 12:50:55 发布

weixin_30642869

最新推荐文章于 2021-06-09 12:50:55 发布

阅读量127

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ziyihuang/p/8297700.html

版权

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="txt/html; charset=utf-8" />
    <title></title><style type="text/css">
    a:link;a:visited{
        color:#0044ff;
        text-decoration: none;
    }
    a:hover{
        color:#696969;
    }
    #a{
        width: 500px;
        border:black 1px solid;
        padding: 10px;
    }
    .norm{
        color: #696969;
        font-size:24px;
        background-color: #cdd850;
    }
    .big{
        color: green;
        font-size:28px;
        background-color: #cdd850;
    }
    .small{
        color: red;
        font-size:20px;
        background-color: #cdd850;
    }
    </style>
</head>
<body>
    <!--思路：
    1.先有新闻数据，并用标签封装
    2，定义一些页面样式
    3.确定事件源与事件，以及处理方式中被处理的节点
        事件源：a标签 
        事件：onclick；
        被处理的 节点:div-a

        先取消超链接的默认样式，可以用javascript:void(0)来完成
    -->
    <script type="text/javascript">
    //定义改变字体的方法
        function getclass(name){
            var oNewsText = document.getElementById("a");
                oNewsText.className = name;
        }
        
    
    </script>
    <h1>这是一个新闻标题</h1><hr/>
    <a href="javascript:void(0)" onclick="getclass('big')"/>大字体</a>
    <a href="javascript:void(0)" onclick="getclass('small')"/>小字体</a>
    <hr/>
    <div id ="a" class="norm">
    这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容</div>
</body>
</html>