的JavaScript修改CSS類屬性，而只知道類的名字

Question

這裏是我的CSS類：

.my-css-class-name 
{ 
    display: block; 
} 

而且我一個元素在我的網頁上使用這個類。我想修改這個元素的「顯示」屬性。
我很樂意通過獲取該元素的句柄，然後修改我需要的，但我不知道該元素的名稱 - 它是隨機生成的（這是第三方擴展）。

所以我想我必須得到「.my-css-class-name」的句柄並直接修改該屬性。
如何到達那裏，跨瀏覽器（主要的）解決方案？

編輯＃1：
我正在尋找與新瀏覽器的兼容性。

Answer 1

繼在評論你的反應，如果元素是由Jquery生成，那麼該庫很可能已安裝。您可以嘗試通過Jquery選擇它並更改require屬性。

$(document).ready(function(){  
$('.my-class-name').css('display', 'block'); 
}); 

用'block'代替你需要的任何設置。

如果包含jquery它應該做你想要的頁面加載。您也可以將其附加到其他事件。

$(document).ready(function(){ 
$('.my-class-name').click(classClicked); 
}) 

function classClicked(){ 
$(this).css('display','block') 
} 

Answer 2

getElementByClassName是不可能的（在舊的瀏覽器中），但是有解決方法，包括遍歷每個元素。參見這裏討論Do we have getElementsByClassName in javascript?

Answer 3

那麼，從理論上講，這很容易。

document.getElementsByClassName("my-css-class-name")[0].style.display = "something"; 

情況下你需要IE瀏覽器的兼容性：

/* 
    Developed by Robert Nyman, http://www.robertnyman.com 
    Code/licensing: http://code.google.com/p/getelementsbyclassname/ 
*/ 
var getElementsByClassName = function (className, tag/* "a","div",... */, elm/*parent*/){ 
    if (document.getElementsByClassName) { 
     getElementsByClassName = function (className, tag, elm) { 
      elm = elm || document; 
      var elements = elm.getElementsByClassName(className), 
       nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null, 
       returnElements = [], 
       current; 
      for(var i=0, il=elements.length; i<il; i+=1){ 
       current = elements[i]; 
       if(!nodeName || nodeName.test(current.nodeName)) { 
        returnElements.push(current); 
       } 
      } 
      return returnElements; 
     }; 
    } 
    else if (document.evaluate) { 
     getElementsByClassName = function (className, tag, elm) { 
      tag = tag || "*"; 
      elm = elm || document; 
      var classes = className.split(" "), 
       classesToCheck = "", 
       xhtmlNamespace = "http://www.w3.org/1999/xhtml", 
       namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null, 
       returnElements = [], 
       elements, 
       node; 
      for(var j=0, jl=classes.length; j<jl; j+=1){ 
       classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]"; 
      } 
      try { 
       elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null); 
      } 
      catch (e) { 
       elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null); 
      } 
      while ((node = elements.iterateNext())) { 
       returnElements.push(node); 
      } 
      return returnElements; 
     }; 
    } 
    else { 
     getElementsByClassName = function (className, tag, elm) { 
      tag = tag || "*"; 
      elm = elm || document; 
      var classes = className.split(" "), 
       classesToCheck = [], 
       elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag), 
       current, 
       returnElements = [], 
       match; 
      for(var k=0, kl=classes.length; k<kl; k+=1){ 
       classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)")); 
      } 
      for(var l=0, ll=elements.length; l<ll; l+=1){ 
       current = elements[l]; 
       match = false; 
       for(var m=0, ml=classesToCheck.length; m<ml; m+=1){ 
        match = classesToCheck[m].test(current.className); 
        if (!match) { 
         break; 
        } 
       } 
       if (match) { 
        returnElements.push(current); 
       } 
      } 
      return returnElements; 
     }; 
    } 
    return getElementsByClassName(className, tag, elm); 
}; 

getElementsByClassName("my-css-class-name")[0].style.display = "something"; 

Answer 4

一些較新的瀏覽器支持document.getElementsByClassName開箱的。舊的瀏覽器不需要，你必須使用一個循環遍歷頁面元素的函數。

Answer 5

靈活的getElementsByClassName函數支持不支持本機函數的瀏覽器版本，因爲建議的jh可能是您正在尋找的。至少它會起作用。但是，對於您正在做的事情，查看document.styleSheets屬性可能很有用。通過這條路線，您可以直接更改CSS規則，如果它在不同瀏覽器中一致地工作，則會是更好的路線。不幸的是，在這方面的瀏覽器兼容性是遠遠一致，如下所示：http://www.quirksmode.org/dom/w3c_css.html

如果你仍然有興趣，看看這個問題：Changing a CSS rule-set from Javascript