Question

我有这个问题，我应该要求用户输入，并根据该输入显示图像和音频。这是我到目前为止所做的。

<!DOCTYPE html>
<html>
<head>
    <link rel = "stylesheet" href = "styles/lab8.css"/>
    <script type="text/javascript">

        function input() {
            do{
            var choice = window.prompt("Enter C for Chekov, U for Uhura, or L for Sulu", "Enter Letter");
            }
        while(choice != 'C' && choice != 'U' && choice != 'L');
        function chekov() {
            //remove display : none
        }
        if(choice == "C"){
            document.write("chekov()");
        }
        else if(choice == "L"){
            document.getElementById("L");
        }
        else if(choice == "U"){
            document.getElementById("U");
        }
        }
    </script>

</head>
<body id = "body" onload= "input()">
    <div id = "paragraph" >
        <p>
            Star Trek has been a cult phenomenon for decades.
            Fans of the franchise are called Trekkies or Trekkers. 
            The franchise spans a wide range of spin-offs including games, figurines, novels, toys, and comics. Star Trek had a themed attraction in Las Vegas that opened in 1998 and closed in September 2008. 
            At least two museum exhibits of props travel the world. 
            The series has its own full-fledged constructed language, Klingon. 
            Several parodies have been made of Star Trek. 
            In addition, viewers have produced several fan productions.
            Star Trek is noted for its influence on the world outside of science fiction. 
            It has been cited as an inspiration for several technological inventions, including the cell phone and tablets.
            The franchise is also noted for its progressive era civil rights stances.
            The original series included one of television's first multiracial casts. 
            Star Trek references can be found throughout popular culture from movies such as the submarine thriller Crimson Tide to the animated series South Park.
        </p>
    </div>
</body>

<div class = "display" id = "C">
    <img src = "chekov.jpg" id = "image">
    <audio controls id ="audio">
        <source src = "chekov.mp3" type="audio/mpeg">
    </audio>
</div>  


<div class = "display" id = "L">
    <img src = "sulu.jpg" id = "image">
    <audio controls id ="audio">
        <source src = "sulu.mp3" type="audio/mpeg">
    </audio>
</div>  


<div class = "display" id = "U">
    <img src = "uhura.bmp" id = "image">
    <audio controls id ="audio">
        <source src = "uhura.mp3" type="audio/mpeg">
    </audio>
</div>  


</html>

这是外部CSS

div.display{width:70%;background-color:#ccffe6;display:none; }
#audio {margin: 5px 5px 5px 5px;}
#paragraph {margin: 5px 5px 5px 5px;border: solid; width : 70%; background-color:#ffcc00;padding:5px;color: #b300b3;}
#body  {background-color : #b30000;}
#image {margin: 5px 5px 5px 5px;border: 15px solid #660066}

我只更改了选项c的代码进行测试。我想要做的是当用户输入C时，它将打印该函数，使得id的类“display”删除了“display：none”。有没有办法从一个类中移除：display：none“，或者是否有替代方法。我正在考虑制作它，因此该函数将类更改为另一个相同但没有”display：none“的类，但我觉得这是错误的做法，不愿意使用它。

这是我第一次介绍javascript和html所以我很乐意提出解决问题的方法，并解释为什么我需要做某些事情。

Answer 1

首先，一些术语。 “类”没有“属性”。你的意思是“规则”（由“选择器”定义，可能包括“类名”），它们具有“属性声明”。

因此，问题的正确标题是“有没有办法从CSS规则中删除属性？”。

我正在考虑制作它，所以函数将类更改为另一个没有display: none的相同的类，但我觉得这是错误的方法，并且不想使用它。

为什么你觉得这是错误的方式？这就是几乎所有动态HTML / CSS /样式的完成方式。

如果没有display: none;，您不需要创建一个“相同”的单独并行类。虽然有不同的方法可以解决这个问题，但最简单的是另一个重新开启显示的规则，我们称之为show：

div.show { display: block; }

只需在HTML元素中添加和删除该类。

替代方案，即修改电子表格中的规则，绝对是值得避免的。几乎没有必要。它使人们几乎不可能看到你的代码来弄清楚发生了什么，因为CSS可能已经从它们下面改变了。它要求他们熟悉一个大多数人都不知道的全新API（与管理样式表相关的API），因为他们永远不必使用它。

有没有办法从CSS规则中删除属性？

1 个答案: