码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-01-17 01:26:23      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:html   link   col   cti   标题   默认   oct   ora   font   

<!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>

 

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

标签:html   link   col   cti   标题   默认   oct   ora   font   

原文地址:https://www.cnblogs.com/ziyihuang/p/8297700.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!