Question

作为上周我的因特网地理信息系统班的一项任务的一部分,我为虚构商业网站制作了一个超文本记。我本周(晚于11:59 PM MST)的任务是用Canvas页上所列的四种方式改进网页,我选择的两种方式是利用Javascript通过互动的纽特(第4号)。我决定这样做,重复我原来的CSS风格,并替换其中的正常肤色(背色色:直线;文色:黑通)改为高色国名(背色:黑色;文色:黄色)。我尝试了一种一顿的解决办法,但无法说明如何使解决办法发挥作用,因此,我现在决定尝试一个两顿解决方案。然而,我仍然 as忙于找到两丁点解决办法。我无法在互联网其他地方找到任何有用的信息,因此,我认为我恳请大家在此提供帮助。我把我的超文本页码列入下面,但为了隐私的目的,将改变企业名称和首席执行官名称(这家企业是自己命名的)。

<!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:UserssmithOneDrivePicturesScreenshotsJohnSmith-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:UserssmithOneDrivePicturesJohnSmith_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>

Answer 1

建议,当你点击 but子时,简单地把一等子放在身体上。然后,利用这一类别的存在来推翻选定的风格。如果你想要的话,你仍可以将<代码>、高功能的风格规则编成单独的中央支助事务档案,但没有必要。

document.querySelector( button ).addEventListener( click , evt => {
  document.body.classList.toggle( high-contrast )
})

.green {
  color: green;
}

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

友情链接