我有一个为虚构的商业网站创建的 HTML 工作表，作为上周我的互联网 GIS 课程作业的一部分。我本周的作业（MST 今晚 11:59 截止）是通过作业 Canvas 页面上列出的四种方法中的两种来改进页面，我选择的两种方法是使用 Javascript 更改 HTML 样式（选项#3）通过交互式按钮（选项#4）。我决定通过复制原始 CSS 样式表并将其中的正常对比度颜色名称（背景颜色：亚麻色；文本颜色：栗色）替换为高对比度颜色名称（背景颜色：黑色；文本颜色：黄色）来实现此目的。我尝试了一键解决方案，但不知道如何使其工作，所以我现在决定尝试两键解决方案。然而，我仍然对如何使用两个按钮的解决方案感到困惑。我在互联网上的其他地方找不到任何有用的信息，所以我想我会在这里向大家寻求帮助。我在下面添加了我的 HTML 页面代码，但出于隐私目的，我将更改公司和首席执行官的名称（公司以我自己的名字命名）。
<!DOCTYPE html>
<html>
<head>
<title>Services – John Smith Consulting</title>
<link rel="stylesheet" type="text/css" href="JohnSmith_InternetGIS_SP2024_Lab121.css id="theme1">
<link rel="stylesheet" type="text/css" href="JohnSmith_InternetGIS_SP2024_Lab122.css" id="theme2">
</head>
<body>
<button type="button">Switch to high contrast</button>
<button type="button">Switch to regular colors</button>
<h1>Our Services</h1>
<p1>We offer cartography using ArcGIS Pro and web app development using ArcGIS Online.</p1>
<h2>Service Requirements</h2>
<p2>All we ask is that you simply provide us with GIS data up front. We here at John Smith Consulting are either fresh out of college or otherwise inexperienced with GIS outside of a classroom environment.</p2>
<h2>Which File Types do We Accept?</h2>
<p2>We accept any file type compatible with ArcGIS Pro or ArcGIS Online, including but not limited to</p2>
<ul>
<li>Shapefiles – SHP</li>
<li>Comma Separated Values files – CSV</li>
<li>GeoJSON files</li>
<li>Layer package files – LPK</li>
</ul>
<h2>Examples of Past Projects</h2>
<img src="C:\Users\smith\OneDrive\Pictures\Screenshots\JohnSmith-UCCS-InternetGIS-SP2024-Lab11-Screenshot1.png" style="width:320px;height:180px;">
<a href="https://experience.arcgis.com/experience/7db76a91198841349a8ccd6c005537c1/">World War II Naval Battles and Shipwrecks ArcGIS Web Experience</a>
<h1>Our CEO</h1>
<img src="C:\Users\smith\OneDrive\Pictures\JohnSmith_Selfie_04042023.jpg" alt="JohnSmith" style="width:290px;height:386px;">
<p1>John Smith is the CEO of John Smith Consulting, which he founded on 15 May 2024 after graduating from the University of Colorado Colorado Springs with a BA in Geography and a GIS certificate.</p1>
建议当您单击按钮时，只需在 body 元素上切换一个类即可。然后使用该类的存在来覆盖选定的样式。如果您愿意，您仍然可以将
.high-contrastdocument.querySelector('button').addEventListener('click', evt => {
document.body.classList.toggle('high-contrast')
}).green {
color: green;
}
body.high-contrast {
background: black;
color: white;
}
.high-contrast .green {
color: lime;
}<button>toggle high contrast</button>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus congue velit faucibus, sed interdum purus consectetur.
</p>
<p class="green">
Cras volutpat velit non mi sagittis condimentum. Cras tempor aliquet turpis sed pretium. Nunc aliquet sodales turpis quis ultrices. Duis auctor accumsan enim, quis maximus ex malesuada a. Donec a felis ut erat tempus euismod non vel neque. Proin lectus massa, sagittis at imperdiet nec, consequat ut neque. Sed vel placerat neque, vel varius urna. Vivamus interdum euismod urna a accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>
Nulla rhoncus aliquam mauris, eu pretium dolor auctor in. Maecenas a sollicitudin dolor, eget commodo quam. Proin et dui sed ligula vulputate egestas. Quisque eget augue vitae purus placerat pharetra. Aliquam rhoncus convallis lorem, sed facilisis odio blandit scelerisque. Vivamus viverra urna ac nulla interdum, eget ullamcorper leo maximus. Mauris nec feugiat enim. Nam congue, dui sit amet vestibulum posuere, leo mauris fermentum lorem, eget bibendum velit nunc quis leo.
</p>