Javascript var.className不太明白

我正在閱讀JavaScript_and_JQuery_Interactive_Front-End_Web_Development_by_Jon_Duckett，作爲Javascript學習的一部分。我在第119頁，添加和刪除對象的屬性。貝婁是html，js和css文件。Javascript var.className不太明白

我已經改變javascript文件

elPool.className = "Pool: " + hotel.pool;

是：

elPool.className = hotel.pool

，但它似乎並沒有在Firefox中改變輸出。

問題：

我不得不做一些思考，瞭解.className東西，我conclussion是這樣的：var elPool首先得到「池」元素的HTML值（在這種情況下，它是單詞「池「）。然後該元素通過elPool變量分配一個新類（因爲它之前沒有）。在這種情況下，它是一個類.true。正確或錯誤的結論？
在CSS文件中，.true和.false類只有一個聯合圖片。如果必須有交叉簽名和交叉檢查標記，並且這是兩張圖片，那麼這種情況如何呢？
var elGym獲得classNamefalse（通過elGym.className = hotel.gym;），並相應地獲得CSS調整。當var elPool有兩個東西添加爲classNames（"Pool: "和hotel.pool）時，var elPool獲得classNametrue的可能性如何？ "Pool: "部分完全被忽略，或者這裏的原理是什麼？ Thanx all！

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>JavaScript &amp; jQuery - Chapter 3: Functions, Methods &amp; Objects - Adding properties</title> 
    <link rel="stylesheet" href="css/c03.css" /> 
    </head> 
    <body> 
    <h1>TravelWorthy</h1> 
    <div id="info"> 
     <h2>hotel facilities</h2> 
     <div id="hotelName"></div> 
     <div> 
     <p id="pool">Pool</p> 
     <p id="gym">Gym</p> 
     </div> 
    </div> 
    <script src="js/adding-and-removing-properties.js"></script> 
    </body> 
</html>

JS：

// Set up the object 
var hotel = { 
    name : 'Park', 
    rooms : 120, 
    booked : 77 
}; 

hotel.gym = false; 
hotel.pool = true; 
delete hotel.booked; 

// Update the HTML 
var elName = document.getElementById('hotelName'); // Get element 
elName.textContent = hotel.name;     // Update HTML with property of the object 

var elPool = document.getElementById('pool');  // Get element 
elPool.className = "Pool: " + hotel.pool;      // Update HTML with property of the object 

var elGym = document.getElementById('gym');  // Get element 
elGym.className = hotel.gym;      // Update HTML with property of the object

CSS：

@import url(http://fonts.googleapis.com/css?family=Open+Sans); 

body { 
    background-color: #fff; 
    background: url("../images/travelworthy-backdrop.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    margin: 0; 
    font-family: 'Open Sans', sans-serif;} 

h1 { 
    background: #1e1b1e url("../images/travelworthy-logo.gif") no-repeat; 
    width: 230px; 
    height: 180px; 
    float: left; 
    text-indent: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
    margin: 0;} 

h2 { 
    margin: 1.75em 0 0 0; 
    color: #adffda; 
    font-weight: normal;} 

h2 + p { 
    margin: 0.25em 0 0 0;} 
p + p { 
    margin: 0;} 
p + h2 { 
    margin: 10px 0 0 0;} 

/* message under the logo */ 

#message { 
    float: left; 
    clear: left; 
    background-color: #ffb87a; 
    color: #1e1b1e; 
    width:170px; 
    padding: 18px 30px; 
    text-align: center;} 

/* black bar across the right hand side of the page */ 

#info { 
    background-color: #1e1b1e; 
    color: #fff; 
    width: 200px; 
    padding: 0 15px; 
    text-align: center; 
    min-height: 100%; 
    position: absolute; 
    top: 0; 
    right: 15%;} 

/* details in the black bar */ 

#hotelName { 
    text-transform: uppercase; 
    text-align: center; 
    font-size: 120%; 
    margin-top: 10px; 
    border-top: 1px solid #fff; 
    border-bottom: 1px solid #fff; 
    padding: 10px 0;} 

#hotel1 { 
    margin-top: 1em; 
    border-top: 1px solid #fff; 
    padding-top: 1em;} 
#hotel2 { 
    border-bottom: 1px solid #fff; 
    padding-bottom: 1em;} 

#rooms { 
    font-size: 440%; 
    color: #ffb87a; 
    display: inline-block; 
    margin: 0;} 

#roomRate{ 
    text-decoration: line-through; 
    display: inline-block; 
    float: left; 
    padding-top: 10px;} 

#specialRate { 
    font-size: 440%; 
    color: #ffb87a; 
    display: inline-block; 
    padding: 10px 0 20px 0; 
    margin: 0;} 

#offerEnds { 
    text-transform: uppercase; 
    color: #ffb87a; 
    font-size: 75%;} 

.true, .false { 
    padding: 0 50px 0 50px; 
    line-height: 28px; 
    text-align: left; 
    background-image: url("../images/check-cross.png"); 
    background-position: 120px 0; 
    background-repeat: no-repeat;} 

.false { 
    background-position: 120px -28px;} 

/* footer */ 

#footer { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background-color: #adffda;} 

#footer p { 
    padding: 10px; 
    margin: 0;} 

.data { 
    padding: 10px;}

來源

2016-12-07 Yozex

document.getElementById('pool')返回DOM元素，而不是其文本內容。因此，當您分配給.className屬性時，您將設置該元素的類，就好像它在HTML中具有class="Pool: true"一樣。
有一個在CSS的.true和.false聯合項，但也有它覆蓋background-position風格.false另一個條目。它使用的是CSS sprite：在不同位置包含多張照片的單個圖像文件，並且background-position根據類別安排相應的圖片顯示。
className是空格分隔的類列表，所以"Pool: true"是兩個類，Pool:和true。由於.Pool:沒有CSS（因爲:在CSS選擇器中有特殊含義，所以它必須寫爲.Pool\:），那麼這個類將被有效地忽略。我不確定書中爲什麼會出現這種情況，也許這是爲了讓HTML中的類的含義更加明顯。恕我直言，最好是使用類似pool-true和pool-false或pool和nopool。

來源

2016-12-07 19:21:15 Barmar

我想你的那種人只能回答這些像大問題;） – jafarbtech

我想補充一些澄清：＃2，包含檢查和交叉稱爲_CSS sprite_單一的背景圖片，你可以在這裏閱讀更多關於它的信息：https://css-tricks.com/css-sprites/ 對於＃3，忽略「Pool：」的原因是它是無效的類名。 – Dan

@Dan雖然冒號在CSS類選擇器中是無效的（它在僞類之前用作分隔符），但我不認爲HTML具有相同的限制。 – Barmar

Javascript var.className不太明白

回答

相關問題