在Javascript中更改類的CSS？

我得設置爲none顯示類，我想在Javascript現在它設置爲inline我知道我可以用getElementById一個id這樣做，但什麼是帶班做最徹底的方法？做在Javascript中更改類的CSS？

2011-04-22 Skizit

僅供將來參考，因爲我認爲它非常類似於你想要的：http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript – Zirak 2011-04-22 08:41:38

您可以做 —真正改變有關使用styleSheets陣列（MDC link，MSDN link）一類 —樣式規則，但坦率地說你可能會更好（如更新日誌說的）有一個單獨的樣式定義display: none，然後從元素移除風格，當你希望他們不再隱藏。

來源

2011-04-22 08:39:41

最好的辦法是有一個隱藏的類，如下所示：

.hidden { display: none; }

之後，有一個className屬性在JavaScript中的每一個元素。您可以操縱該字符串以刪除hidden類的出現並添加另一個。

一條建議：使用jQuery。可以更容易地處理這種東西，你可以不喜歡它：

$('#element_id').removeClass('hidden').addClass('something');

來源

2011-04-22 08:36:33 changelog

Pfft！什麼不是關於jQuery的Javascript？ ;-) – changelog 2011-04-22 08:44:42

jQuery特定的代碼在普通香草JS中不起作用的事實，如果未包含jQuery？「使用jQuery」並不總是對JS的每個問題的有效答案，我相信有些人厭倦了聽到它。 – cHao 2011-04-27 11:51:31

通常你的回答不應該引入jQuery，如果它沒有在問題中提到。如果你真的想要包括jQuery，應該在香草JavaScript中回答並添加一個「...但是，在jQuery中，它看起來像這樣：」 – meagar 2011-04-27 15:49:42

你的意思是這樣的？

var elements = document.getElementsByClassName('hidden-class'); 
for (var i in elements) { 
    if (elements.hasOwnProperty(i)) { 
    elements[i].className = 'show-class'; 
    } 
}

然後CSS

.hidden-class { display: none; } 
.show-class { display: inline; }

來源

2011-04-22 08:39:30 Znarkus

索賠有作爲'getElementsByClassName'沒有這樣的方法'document' – Skizit 2011-04-22 08:49:53

HRM，它不是由[舊的IE瀏覽器（支持HTTP：/ /www.quirksmode.org/dom/w3c_core.html#fivemethods）。我誠實地推薦像jQuery這樣的東西，但每次我建議它都會遭到抨擊。 – Znarkus 2011-04-22 08:54:22

@Zharkus：在推薦使用圖書館作爲*附件*或附錄時，不要求其中一個（稱其中一個分裂者）;當有人用純粹的jQuery答案回答一個非jQuery問題時，它是適當的。 @Skizit：庫ilke [jQuery]（http://jquery.com），[Prototype]（http://prototypejs.org），[YUI]（http://developer.yahoo.com/yui/）， [關閉]（http://code.google.com/closure/library）或[其他任何其他]（http://en.wikipedia.org/wiki/List_of_JavaScript_libraries）可以平滑瀏覽器的差異，提供許多有用的工具。 – 2011-04-22 09:19:49

您可以使用getElementsByClassName中，你會得到元素的數組。但是，這在舊版瀏覽器中沒有實現。在那些情況下getElementsByClassName是undefined因此the code has to iterate through elements and check which ones have the desired class name。

爲此，您應該使用JavaScript框架，如jQuery，MooTools的，原型等

在jQuery中它可以用一行代碼來完成，因爲這：

$('.theClassName').css('display', 'inline')

來源

2011-04-22 08:45:33 Spoike

錯了，這應該是'$（ 'theClassName。'）。 css（'display'，'inline'）' – Znarkus 2011-04-22 08:50:27

@Znarkus哎呀，修好了！ – Spoike 2011-04-22 08:57:05

您可以創建新的規則代替。

var cssStyle = document.createElement('style'); 
cssStyle.type = 'text/css'; 
var rules = document.createTextNode(".YOU_CLASS_NAME{display:hidden}"); 
cssStyle.appendChild(rules); 
document.getElementsByTagName("head")[0].appendChild(cssStyle); 

$("#YOUR_DOM_ID").addClass("YOUR_CLASS_NAME");

來源

2012-11-18 01:59:21 Soyoes

你可能喜歡利用/改寫這個功能：

function getStyleRule(ruleClass, property, cssFile) { 
    for (var s = 0; s < document.styleSheets.length; s++) { 
     var sheet = document.styleSheets[s]; 
     if (sheet.href.endsWith(cssFile)) { 
      var rules = sheet.cssRules ? sheet.cssRules : sheet.rules; 
      if (rules == null) return null; 
      for (var i = 0; i < rules.length; i++) { 
       if (rules[i].selectorText == ruleClass) { 
        return rules[i].style[property]; 
        //or rules[i].style["border"]="2px solid red"; 
        //or rules[i].style["boxShadow"]="4px 4px 4px -2px rgba(0,0,0,0.5)"; 
       } 
      } 
     } 
    } 
    return null; 
}

掃描所有樣式表附傳「」作爲第三個參數，否則像「index.css」
ruleClass包含開始'。'
如果（規則[I] .selectorText & &規則[I] .selectorText.split（ ''）。的indexOf（財產）！== -1）條件的改善在這裏找到https://stackoverflow.com/a/16966533/881375
不要忘記在CSS屬性上使用JavaScript語法，例如盒子陰影與boxShadow

來源

2013-10-04 03:42:58 tomasb

最後，一個很好的答案:)我編輯它，並添加一個「值」輸入立即改變規則 – 2015-02-10 17:15:14

雖然這是早已不復存在，這裏談幾點看法：

o使用「顯示：內聯」讓事情再次看到可能會破壞頁面流。一些元素內嵌顯示，其他元素顯示等。這應該被保留。因此，只需定義一個.hidden樣式並將其刪除即可再次顯示。

o如何隱藏：至少有兩種隱藏元素的方法，一種是上面提到的「display：none」，它基本上使元素表現得好像它不存在一樣，而「visibility：hidden 「它使元素不可見但保持它佔據的空間。根據要隱藏的內容，可見性可能是更好的選擇，因爲其他元素在顯示/隱藏元素時不會移動。

o添加/刪除類與操縱CSS規則：結果完全不同。如果操縱CSS規則，那麼現在和將來都會影響具有某個CSS類的所有元素，即動態添加到DOM的新元素也會隱藏，而添加/刪除類時，必須確保新添加的元素也會添加/刪除類。所以，我認爲添加/刪除類對於靜態HTML非常適用，而操縱CSS規則可能是動態創建的DOM元素的更好選擇。

來源

2014-09-19 14:55:55

在Javascript中更改類的CSS？

回答

相關問題