使用Javascript在HTML中使用CSS設計樣式

如何將樣式代碼傳輸到我的外部CSS文件？我認爲使用.gamelist將不起作用，因爲<form>或<input>的東西。我知道我可以將樣式留在html文件中，但我喜歡所有的東西儘可能地整潔和組織。使用Javascript在HTML中使用CSS設計樣式

這裏的html代碼：

<div id="sidebar"> 
    <p class="gamelist"> 
     <FORM> 
      <input type="image" src="images/mariosadv.jpg" border="2" style="border:2px solid black;max-width:150px;" value="Enter Protected Area" onClick="passWord()"> 
     </FORM> 
     <FORM> 
      <input type="image" src="images/mariosadv2.jpg" border="2" style="border:2px solid black;max-width:150px;" value="Enter Protected Area" onClick="passWord()"> 
     </FORM> 
</div>

這裏是我的簡單的JavaScript函數：

function passWord() { 
    var testV = 1; 
    var pass1 = prompt('Please Enter Your Password',' '); 
    while (testV < 3) { 
    if (!pass1) 
    history.go(-1); 
    if (pass1.toLowerCase() == "letmein") { 
    alert('You Got it Right!'); 
    window.open('mariosadv.html'); 
    break; 
} 
    testV+=1; 
    var pass1 = 
    prompt('Access Denied - Password Incorrect, Please Try Again.','Password'); 
} 
    if (pass1.toLowerCase()!="password" & testV ==3) 
    history.go(-1); 
    return " "; 
}

這是我試過的CSS：

.gamelist img { 
    display: block; 
    border: 2px solid black; 
    width:150px; 
    margin: 5px 0px 5px 0px; 
}

這是我的JavaScript http://i.imgur.com/QVc6Dgu.jpg

而這正是我想要的，但沒有JavaScript的 http://i.imgur.com/sNX3Els.jpg

如果需要任何額外的信息，請拒絕我的問題之前問。謝謝。

來源

2013-04-05 TheUnCola

嘗試使用'gamelist input'作爲您的CSS選擇器 – martincarlin87 2013-04-05 14:29:56

永遠不會使用客戶端身份驗證！ – errieman 2013-04-05 14:31:38

@errieman我仍然對編碼感興趣，所以你可以告訴我客戶端認證是什麼？ – TheUnCola 2013-04-05 15:41:28

你需要進行造型的.gamelist [type=image]代替.gamelist img，因爲img只是指標籤與該名稱（不一般的圖像）。

編輯這是你的HTML應該是什麼樣子：

<div class="gamelist"> 
    <FORM> 
     <input type="image" src="images/mariosadv.jpg" value="Enter Protected Area" onClick="passWord()"> 
    </FORM> 
    <FORM> 
     <input type="image" src="images/mariosadv2.jpg" value="Enter Protected Area" onClick="passWord()"> 
    </FORM> 
</div>

來源

2013-04-05 14:29:56 metadept

哇，我真的認爲這會工作，但它仍然在做同樣的事情。我覺得即使真的很接近。回覆較晚，抱歉。 – TheUnCola 2013-04-05 16:40:38

@TheUnCola你可以提供一個jsFiddle或指向你的頁面的鏈接，顯示它不工作的地方嗎？提供的代碼很難給出更具體的答案。 – metadept 2013-04-05 16:47:02

http://udel.edu/~ssell/games.html對不起，我點擊添加評論，但它不能通過，因爲我的互聯網現在吸了。 – TheUnCola 2013-04-05 17:30:37

由於metadept寫道，你需要使用CSS選擇以下內容：輸入[類型= '形象'。請注意，.gamelist input[type='image']不會選擇所需的輸入字段，因爲它們沒有類別遊戲列表。

對於CSS選擇器概述使用：http://www.w3schools.com/cssref/css_selectors.asp

請不要使用客戶端的認證！

來源

2013-04-05 14:48:00

請避免w3schools。它包含很多錯誤信息。相反，使用w3c提供的信息：http://www.w3.org/TR/css3-selectors/ – errieman 2013-04-05 14:52:32

@errieman你說的對，thx – 2013-04-05 14:57:43

使用Javascript在HTML中使用CSS設計樣式

回答

相關問題