Изменить CSS класса в Javascript?

Ответ 1

Вы можете сделать это & ​​nbsp; — на самом деле изменить правила стиля, связанные с классом — используя массив styleSheets (ссылка MDC, ссылка MSDN), но, откровенно говоря, вам, вероятно, лучше (как сказано в подписи), имеющему отдельный стиль, который определяет display: none, а затем удаляет этот стиль из элементов, когда вы хотите, чтобы они больше не скрывались.

Ответ 2

Вы имеете в виду что-то вроде этого?

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; }

Ответ 3

Вы можете использовать getElementsByClassName, в котором вы получите массив элементов. Однако это не реализовано в старых браузерах. В таких случаях getElementsByClassName undefined, поэтому код должен перебирать элементы и проверять, какие из них имеют желаемое имя класса.

Для этого вы должны использовать фреймворк javascript, такой как jQuery, mootools, прототип и т.д.

В jQuery это можно сделать с помощью однострочного интерфейса:

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

Ответ 4

вместо этого вы можете создать новое правило стиля.

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");

Ответ 5

Вы можете использовать/переписать эту функцию:

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 содержит начало '.'
• if (rules [i].selectorText && rules [i].selectorText.split(','). indexOf (свойство)! == -1) условие улучшения найдено здесь fooobar.com/questions/209658/...
• не забудьте использовать синтаксис javascript над свойствами css, например. box-shadow vs. boxShadow

Ответ 6

Хотя это уже давно прошло, здесь несколько замечаний:

o Использование "display: inline" для отображения видимости снова может испортить поток страниц. Некоторые элементы отображаются в строке, другие блокируют и т.д. Это должно быть сохранено. Следовательно, определите только стиль .hidden и удалите его, чтобы снова сделать видимым.

o Как скрыть: есть, по крайней мере, два способа скрыть элементы, один из которых - это вышеупомянутый "display: none", который в основном заставляет элемент вести себя так, как будто его там нет, и "видимость: скрытая", который делает элемент невидимым, но сохраняет занимаемое им пространство. В зависимости от того, что вы хотите скрыть, видимость может быть лучшим выбором, поскольку другие элементы не будут перемещаться при отображении/скрытии элемента.

o Добавление/удаление классов против манипулирования правилами CSS: результат совсем другой. Если вы управляете правилами CSS, все элементы, имеющие определенный класс CSS, будут затронуты - теперь и в будущем, то есть новые элементы, динамически добавленные в DOM, также скрыты, тогда как когда вы добавляете/удаляете класс, вы должны убедиться, что недавно добавленные элементы также добавили/удалили класс. Итак, я бы сказал, что добавление/удаление классов хорошо работает для статического HTML, тогда как использование правил CSS может быть лучшим выбором для динамически созданных элементов DOM.

Ответ 7

Лучший способ сделать это - иметь скрытый класс, например:

.hidden { display: none; }

После этого для каждого элемента JavaScript существует атрибут className. Вы можете просто манипулировать этой строкой, чтобы удалить вхождения класса hidden и добавить еще один.

Один совет: используйте jQuery. Легче справиться с такими вещами, вы можете сделать это как:

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