爲什麼我不能爲div設置價值？

我想爲div設置值，我嘗試了很多方法，但是他們都沒有工作。我覺得語法是正確的，因爲我alots的研究爲什麼我不能爲div設置價值？

.flip3d2{width:100px;height:100px;margin:10px; float:left;} 
.flip3d2 .front{ 
position:absolute; 
-webkit-transform:perspective(600px) rotateY(0degdeg); 
transform: perspective(600px) rotateY(0deg); 
background:#fc0;width:100px;height:100px;border-radius:7px; 
-webkit-backface-visibility:hidden; 
backface-visibility:hidden; 
transition:-webkit-transform .5s linear 0s; 
transition:transform .5s linear 0s; 
} 

.flip3d2 .back{ 
position:absolute; 
-webkit-transform:perspective(600px) rotateY(180deg); 
transform: perspective (600px) rotateY(180deg); 
background:#80bfff;width:100px;height:100px;border-radius:7px; 
-webkit-backface-visibility:hidden; 
backface-visibility:hidden; 
transition:-webkit-transform .5s linear 0s; 
transition:transform .5s linear 0s; 
} 

.flip3d2:hover .front 
{ 
-webkit-transform:perspective(600px) rotateY(-180deg); 
transform:perspective(600px) rotateY(-180deg); 
} 

.flip3d2:hover .back 
{ 
-webkit-transform:perspective(600px) rotateY(0deg); 
transform:perspective(600px) rotateY(0deg); 
} 
</style> 

<script> 


var list = document.getElementsByClassName("mainwindow"); 
var list2=list.getElementsByClassName("flip3d2"); 
list2.getElementsByClassName("front").value = "red"; 
    list2.getElementsByClassName("front").text = "red"; 
list2.getElementsByClassName("front").innerHTML = "red"; 
</script> 
</head> 
<body> 
<div class="mainwindow"> 
<div class="flip3d2"> 
<div class="back"> box 2 - back</div> 
<div class="front"> box 2 - front</div> 

</div> 
</div> 
</body> 
</html>

Itried提出三種方式爲格，但沒有一個工作設定值。

來源

2015-07-10 Bisher Andoura

你需要做更多的研究，因爲語法不正確的 - 研究什麼getElementsByClassName方法回報，那麼你就會明白爲什麼你就錯了 –

@JaromandaX我認爲這個問題應該被關閉。隨着一些更多的研究OP應該已經弄清楚了。這只是關於getElementsByClassName方法的另一個問題...的 – Michelangelo

可能重複[這是什麼getElementsByClassName方法返回？]（http://stackoverflow.com/questions/10693845/what-does-getelementsbyclassname-return） – Michelangelo

getElementsByClassName返回一個HTMLcollection（它是一個類似於可包含多個元素的對象的數組）對象，而不是一個直接的dom引用，所以它沒有像innerHTML這樣的屬性。

如果您確定只有1個元素，那麼您可以使用索引訪問dom引用，否則您可以迭代集合並設置內容。

var list = document.getElementsByClassName("mainwindow")[0]; 
 
var list2 = list.getElementsByClassName("flip3d2")[0]; 
 
list2.getElementsByClassName("front")[0].innerHTML = "red"; 
 

 
//to loop 
 
//var els = list2.getElementsByClassName("front"); 
 
//for(var i = 0; i < els.length; i++){ 
 
// els[i].innerHTML = 'something' 
 
//}

.flip3d2 { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 10px; 
 
    float: left; 
 
} 
 
.flip3d2 .front { 
 
    position: absolute; 
 
    -webkit-transform: perspective(600px) rotateY(0degdeg); 
 
    transform: perspective(600px) rotateY(0deg); 
 
    background: #fc0; 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 7px; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    transition: -webkit-transform .5s linear 0s; 
 
    transition: transform .5s linear 0s; 
 
} 
 
.flip3d2 .back { 
 
    position: absolute; 
 
    -webkit-transform: perspective(600px) rotateY(180deg); 
 
    transform: perspective (600px) rotateY(180deg); 
 
    background: #80bfff; 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 7px; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    transition: -webkit-transform .5s linear 0s; 
 
    transition: transform .5s linear 0s; 
 
} 
 
.flip3d2:hover .front { 
 
    -webkit-transform: perspective(600px) rotateY(-180deg); 
 
    transform: perspective(600px) rotateY(-180deg); 
 
} 
 
.flip3d2:hover .back { 
 
    -webkit-transform: perspective(600px) rotateY(0deg); 
 
    transform: perspective(600px) rotateY(0deg); 
 
}

<div class="mainwindow"> 
 
    <div class="flip3d2"> 
 
    <div class="back">box 2 - back</div> 
 
    <div class="front">box 2 - front</div> 
 
    </div> 
 
</div>

來源

2015-07-10 00:54:34

我試過這個解決方案的語法，但它沒有工作 –

我以前試過這種解決方案，但它沒有工作，我覺得代碼是正確的，但我不知道到底我在想什麼哪裏是錯 –

直到類屬性並不需要被uniq的，當你從它查詢元素，你會得到元素的數組，注意getElementsByClassName方法的「S」。

document.getElementsByClassName("front")[0].innerHTML = "red";

來源

2015-07-10 00:57:52 Nementon

我試過這個解決方案，但它沒有工作 –

我試過這個解決方案之前，但它沒有工作，我覺得代碼是正確的，但我不知道哪裏是錯 –

如果您嘗試從導航控制檯執行（F12打開開發人員工具/導航到JavaScript控制檯）你會得到什麼樣的錯誤？一個可能的錯誤是，因爲你的javascript代碼是在你的html代碼之前定義的，所以你必須等待直到dom準備就緒，然後再執行它。 document.addEventListener（'DOMContentLoaded'，function（）{/ *您的js代碼在這裏*/document.getElementsByClassName（「front」）[0] .innerHTML =「red」;}）; – Nementon

您的代碼有幾個錯誤。正如Arun P Johny的回答所述，getElementsByClassName返回HTMLCollection,array-like object，而不是DOM節點。您將會注意到，getElement s ByClassName中的所有DOM方法都具有元素s，它的名稱返回HTMLCollection。諸如getElementById（沒有s）的方法返回單個DOM節點。

如果您習慣於使用jQuery，jQuery提供了一個類似數組的對象，該對象具有可以操縱整個集合的方法，這可能是您爲什麼使用DOM方法返回的集合，但不幸的是，您不能用HTMLCollection s這樣做。

因爲HTMLCollection s爲陣列狀，則可以使用括號記號訪問他們的內容：

var list = document.getElementsByClassName("mainwindow")[0]; 
var list2 = list.getElementsByClassName("flip3d2")[0]; 
list2.getElementsByClassName("front")[0].textContent = "red";

或者你可以使用querySelector這將返回基於CSS選擇一個DOM元素：

var list = document.querySelector(".mainwindow"); 
var list2 = list.querySelector(".flip3d2"); 
list2.querySelector(".front").textContent = "red";

，或者如果你不需要.mainwindow參考，你可以只是做：

，或者如果你不需要任何.mainwindow或.flip3d2其他東西的參考，你可以只是做：

document.querySelector(".mainwindow .flip3d2 .front").textContent = "red"

的另一個問題與您的代碼是腳本標籤是HTML以上您嘗試訪問的元素的標記。當您撥打getElementsByClassName時，這些元素不存在，因此您會收到一個空的HTMLCollection對象。將<script>標記移動到<div>標記下方以解決該問題。將腳本儘可能放在頁面中是一個很好的做法，它有助於避免這種情況，並且還有improves the performance of your page。

一些其他的東西，

HTMLDivElement都不具備的一個.value屬性，設置它什麼都不做有意義的（雖然它會創建一個expando property。
一個div沒有按「T有.text財產，你可能尋找.textContent。
同時使用.textContent和.innerHTML是多餘的。 .textContent將設置元素的文本，然後.innerHTML將立即覆蓋它。如果您設置的是純文本而沒有任何標記，則使用.textContent。如果您從可靠來源注入HTML（不提供用戶，可以打開您達到XSS attacks），則可以使用.innerHTML。

來源

2015-07-15 02:27:47

爲什麼我不能爲div設置價值？

回答

相關問題