2016-02-26 107 views
-1

我有這個問題,我應該要求用戶輸入,並根據該輸入顯示圖像和音頻。 這是我到目前爲止。有沒有辦法從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,所以我很樂意提出解決問題和解釋爲什麼我需要做一些事情

回答

0

首先,有點術語,「類」沒有「屬性」,你顯然是指「規則」(由「選擇器」定義,可能包括「類名」) ,其中有「財產聲明」

因此,您的問題的正確標題是「有沒有辦法從CSS規則中刪除屬性?」。

我正考慮它,因此功能改變類另一類是不相同的display: none,但我覺得這是錯誤的方式去這一點,寧可不使用它。

爲什麼你覺得那是錯誤的方式?這就是幾乎所有動態HTML/CSS /樣式完成的方式。

如果沒有display: none;,則不需要製作「相同」的單獨平行班級。雖然有不同的方式接近這一點,最簡單的是打開顯示屏後在另一個規則,我們稱之爲show

div.show { display: block; } 

,並簡單地添加,並從你的HTML元素移除類。

另一種方法是修改電子表格中的規則,這絕對是要避免的。這幾乎沒有必要。這使得人們查看你的代碼幾乎不可能弄清楚發生了什麼,因爲CSS可能已經從它們下面改變了出來。它要求他們熟悉大多數人不知道的全新API(與管理樣式表有關的API),因爲他們永遠不必使用它。

+0

關於'div.show {display:block; }'......如果它最初是'display:inline-block'呢? –

+0

考慮到css優先級概念,如果類'div.show'寫在'div.display'上面,這可能不起作用。另外,如果他將這個新的css規則放置在不同的文件中,則最後加載的文件將具有優先權。所以我認爲他需要的是'div.display.show' –

相關問題