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

问题描述：

我有这个问题，我应该要求用户输入，并根据该输入显示图像和音频。这是我到目前为止。有没有办法从CSS规则中删除属性？

<!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，所以我很乐意提出解决问题和解释为什么我需要做一些事情

答

首先，有点术语，“类”没有“属性”，你显然是指“规则”（由“选择器”定义，可能包括“类名”），其中有“财产声明”

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

我正考虑它，因此功能改变类另一类是不相同的display: none，但我觉得这是错误的方式去这一点，宁可不使用它。

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

如果没有display: none;，则不需要制作“相同”的单独平行班级。虽然有不同的方式接近这一点，最简单的是打开显示屏后在另一个规则，我们称之为show：

div.show { display: block; }

，并简单地添加，并从你的HTML元素移除类。

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

关于'div.show {display：block; }'......如果它最初是'display：inline-block'呢？ –

考虑到css优先级概念，如果类'div.show'写在'div.display'上面，这可能不起作用。另外，如果他将这个新的css规则放置在不同的文件中，则最后加载的文件将具有优先权。所以我认为他需要的是'div.display.show' –

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

相关推荐