Javascript 如何使透明html元素不可读取？

我正在学习一个关于主题切换的教程。代码如下：

//DOM元素
const darkButton=document.getElementById（“暗”）；
const lightButton=document.getElementById（“light”）；
const solarButton=document.getElementById（“太阳能”）；
const body=document.body；
//重新加载时应用缓存的主题
const-theme='light'；
常数isSolar=false；
如果（主题）{
body.classList.add（主题）；
isSolar&body.classList.add（“太阳能”）；
}
//按钮事件处理程序
darkButton.onclick=（）=>{
body.classList.replace（“亮”、“暗”）；
};
lightButton.onclick=（）=>{
body.classList.replace（“深色”、“浅色”）；
};
solarButton.onclick=（）=>{
if（body.classList.contains（“太阳能”））{
body.classList.remove（“太阳能”）；
}否则{
body.classList.add（“太阳能”）；
}
};
*{
保证金：0；
填充：0；
框大小：边框框；
}
a{
颜色：当前颜色；
文字装饰：无；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
}
主要{
背景色：var（--bg）；
高度：90vh；
颜色：var（--text）；
填充：30px25px0px25px；
}
#特色{
文本对齐：居中；
边缘底部：30px；
}
.网格容器{
高度：自动；
宽度：75%；
保证金：0自动；
}
.基本网格{
显示：网格；
差距：1勒姆；
网格模板列：重复（自动填充，最小值（240px，1fr））；
}
.卡片{
背景：var（--bg卡）；
填充：7px 13px；
颜色：var（--卡片文本）；
边界半径：5px；
过渡：所有0.2秒缓进缓出；
}
.卡p{
颜色：var（--卡片文本）；
}
.卡：悬停{
光标：指针；
转换：标度（1.05）；
}
：根{
--灰色0:#F8；
--灰色1:#dbe1e8；
--灰色2:#b2becd；
--灰色3:#6c7983；
--灰色4:#454e56；
--灰色5:#2a2e35；
--灰色6:#12181b；
--蓝色：#0084a5；
--紫色:#a82dd1 ;；
--黄色：#fff565；
}
.光{
--bg:var（--0）；
--背景导航：线性梯度（向右，var（--gray1），var（--gray3））；
--bg下拉列表：var（--0）；
--文本：var（--gray6）；
--边框颜色：var（--蓝色）；
--bg太阳能：var（--黄色）；
--bg卡：var（--4）；
--卡片文本：var（--gray1）；
}
.黑暗{
--bg:var（--5）；
--bg nav：线性梯度（向右，var（--gray5），var（--gray6））；
--bg下拉列表：var（--gray6）；
--文本：var（--0）；
--边框颜色：var（--紫色）；
--bg太阳能：var（--蓝色）；
--bg卡：var（--2）；
--卡片文本：var（--gray5）；
}
.太阳能{
--灰色0:#fbffd4；
--灰色1:#f7f8d0；
--灰色2:#b6f880；
--灰色3:#5ec72d；
--灰色4:#3ea565；
--灰色5:#005368；
--灰色6:#003d4c；
}
* {
保证金：0；
填充：0；
框大小：边框框；
}
导航{
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
高度：10vh；
背景：var（--bg nav）；
字体系列：“罂粟花”，无衬线；
}
.标志{
颜色：var（--text）；
文本转换：大写；
字母间距：5px；
字号：500；
字号:20 ;；
}
.导航链接{
对齐项目：居中；
显示器：flex；
证明内容：周围的空间；
宽度：50%；
}
.导航链接a{
文字装饰：无；
颜色：var（--text）；
字体大小：300；
字母间距：3px；
字体大小：14px；
}
.nav链接李{
列表样式：无；
}
.汉堡{
显示：无；
}
.汉堡部{
宽度：25px；
高度：2倍；
背景色：var（--汉堡色）；
利润率：6px；
过渡：所有0.3秒缓解；
}
.联系方式{
背景色：rgb（37192192）；
填充：8px 30px；
边界半径：25px；
颜色：var（--text）；
边界：无；
光标：指针；
字体大小：14px；
}
.联系人：悬停{
不透明度：0.8；
}
.下拉列表{
位置：绝对位置；
宽度：500px；
不透明度：0；
z指数：2；
背景：var（--bg下拉列表）；
边框顶部：2个实心变量（--边框颜色）；
边框右下半径：8px；
边框左下半径：8px；
显示器：flex；
对齐项目：居中；
证明内容：周围的空间；
高度：3雷姆；
最高保证金：1.22雷姆；
填充：0.5雷姆；
盒影：rgba（2,8,20,0.1）0px 0.175em 0.5em；
转化：translateX（-40%）；
过渡：不透明度0.15s缓和；
}
.hasDropdown：关注内部。下拉列表{
不透明度：1；
指针事件：自动；
}
.下拉列表项目a{
宽度：100%；
身高：100%；
大小：0.7雷姆；
左侧填充：10px；
字体大小：粗体；
}
.下拉列表项a:：before{
内容：“；
边框：2px实心变量（--边框颜色）；
边界半径：50%；
宽度：2em；
高度：2em；
显示：内联块；
垂直对齐：中间对齐；
右边距：10px；
}

杰诺












接触

尝试使用
显示
属性。隐藏
下拉列表时
类
显示：无再次显示时，使用
display:block或其他什么。
尝试使用
显示属性。隐藏
下拉列表时
类
显示：无再次显示时，使用
display:block或其他东西。
添加
可见性：隐藏到
ul
用class
下拉菜单包装
添加
可见性：隐藏
到
ul
用class
下拉菜单包装
使用
显示
属性可以控制是否显示元素。您刚刚更改的
ul
列表的不透明度并没有将其从页面中删除-它只是使其不可见，但
.hasDropdown .dropdown {
  display: none;
}

.hasDropdown:focus-within .dropdown {
  display: flex;
}

.dropdown {
    transition-delay: 1s;
    transition-property: height;
    transition: opacity 1s ease-out, height 0s;

    opacity:0;
    height: 0;
    padding: 0;

    display: flex;
    overflow: hidden;
}

.hasDropdown:focus-within .dropdown {
    opacity: 1;
    padding: 0.5rem;
    height: 3rem;
    pointer-events: auto;
}