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

Posted 不只学Java

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于Web(通过点击切换新闻字体)相关的知识,希望对你有一定的参考价值。

<!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(通过点击切换新闻字体)的主要内容,如果未能解决你的问题,请参考以下文章

JQuery实现通过点击标题切换字体

java 导航抽屉切换活动而不是片段。字体:https://stackoverflow.com/questions/19442378/navigation-drawer-to-switch-

腾讯新闻多图jQuery相册展示效果代码

显示隐藏小代码

vue项目实战-pc端新闻网页

选项卡