分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

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

发布时间:2023-09-06 01:37责任编辑:胡小海关键词: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(通过点击切换新闻字体)

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved