修改CSS使用JavaScript

-2

我想類似下面的代碼應轉換爲修改CSS使用JavaScript

#A1, #A2, #A3, #A4{ 
    float: left; 
    clear: left; 
    width: 300px; 
    margin: 15px; 
}

到

#A1, #A2, #A3, #A4{ 
    float: left; 
    clear: left; 
    width: 400px; 
    margin: 15px; 
}

和Width屬性值應該是動態的。這應該來自JavaScript。我們怎麼做到這一點？

來源

2011-05-19 Suraj

你有沒有試着用搜索引擎呢？ – Marcin 2011-05-19 14:07:47

嘗試這種情況：

document.getElementById("id").style.width = "900px";

以改變由ID找到的每個元件的寬度。理想情況下，您可以對A1，A2，A3和A4進行此操作。

來源

2011-05-19 14:10:01 Kyle

編輯：好細，這裏是純粹的DOM版本：

function changeWidths(ids, width) { 
    for(var i = 0; i < ids.length; i++) { 
     document.getElementById(ids[i]).style.width = width + "px"; 
    } 
} 

changeWidths(["A1", "A2", "A3", "A4"], 400);

JavaScript不直接作用於實際的CSS文本，它作用於元素的樣式。如果我們使用類似的JQuery，我們可以修改你提到像這樣所有的ID的寬度：

$("#A1, #A2, #A3, #A4").css({"width": 400});

來源

2011-05-19 14:10:46

如果您尚未使用jQuery，則更容易使用原始DOM API。 – Jeremy 2011-05-19 14:15:06

@Jeremy更新了我的代碼。我展示JQuery版本的原因是因爲理解明智，它更好地匹配CSS中的選擇器。 – 2011-05-19 14:19:59

@Jeremy使用jQuery更容易。沒有ifs。 – 2011-05-19 14:21:13

document.getElementById("A1").style.width = "400px";

來源

2011-05-19 14:11:08 jondavidjohn

修改CSS使用JavaScript

回答

相關問題