Javascript изменить класс CSS свойство, зная только имя класса

Question

Вот мой CSS класс:

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

И я один элемент на моей странице, которая использует этот класс. Я хочу изменить свойство «display» этого элемента.
Я бы с радостью сделал это, получив дескриптор этого элемента, а затем изменив то, что мне нужно, НО, я не знаю имя элемента - он случайно генерируется (это стороннее расширение).

Итак, я понял, что мне нужно будет получить дескриптор «.my-css-class-name» и изменить это свойство напрямую.
Как я могу добраться до кросс-браузерного (основного) решения?

Редактировать # 1:
Я ищу совместимость с более новыми браузерами.

Answer 1

После вашего ответа в комментарии, если элемент генерируется JQuery, то, скорее всего, установлена ​​библиотека. Вот что вы можете попробовать выбрать с помощью JQuery и изменить свойство require.

$(document).ready(function(){  
$('.my-class-name').css('display', '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 с поддержкой версий браузера, которые не поддерживают нативную функцию, поскольку предложенная функция может быть тем, что вы ищете. Это будет работать, по крайней мере. Однако для того, что вы делаете, может быть полезно посмотреть на свойство document.styleSheets. С помощью этого маршрута вы можете напрямую изменить правило CSS, которое, если оно будет работать последовательно в браузерах, будет лучшим маршрутом здесь. К сожалению, совместимость браузера в этой области далеко не последователен, как показано здесь: http://www.quirksmode.org/dom/w3c_css.html

Если вы все еще заинтересованы, посмотрите на этот вопрос: Changing a CSS rule-set from Javascript