Как проверить, существует ли правило css

Ответ 1

Вот что я получил, что работает. Он похож на ответы @Smamatti и @jfriend00, но больше близок. Я действительно хочу, чтобы был способ проверить правила напрямую, но хорошо.

CSS

.my-css-loaded-marker { 
  z-index: -98256; /*just a random number*/
}

JS:

$(function () { //Must run on jq ready or $('body') might not exist

    var dummyElement = $('<p>')
                  .hide().css({height: 0, width: 0})
                  .addClass("my-css-loaded-marker")
                  .appendTo("body");  //Works without this on firefox for some reason

    if (dummyElement.css("z-index") != -98256 && console && console.error) {
        console.error("Could not find my-app.css styles. Application requires my-app.css to be loaded in order to function properly");
    }
    dummyElement.remove();
});

Ответ 2

Я не знаю, является ли это для вас вариантом, но если это один файл, который вы хотите проверить, вы можете написать свое сообщение об ошибке и переключить стиль, чтобы скрыть его в этом файле.

<span class="include_error">Error: CSS was not included!</span>

Файл CSS:

.include_error {
    display: none;
    visibility: hidden;
}

Ответ 3

Я тестирую правильную установку CSS с помощью javascript.

У меня есть правило CSS в моей таблице стилей, которая устанавливает определенный id в position: absolute.

#testObject {position: absolute;}

Затем я программно создаю временный div с видимостью: скрытый с этим идентификатором и получающий вычисленную позицию стиля. Если это не absolute, то нужный CSS не установлен.

Если вы не можете поместить свое правило в таблицу стилей, вы можете определить одно или несколько правил, которые, по вашему мнению, являются репрезентативными для таблицы стилей и вряд ли изменятся, и спроектируйте временный объект, который должен получить эти правила и проверить для их существования таким образом.

Или, наконец, вы можете попытаться перечислить все внешние таблицы стилей и найти конкретное имя файла, которое включено.

Дело здесь в том, что если вы хотите увидеть, включена ли внешняя таблица стилей, вам нужно выбрать что-то об этой таблице стилей, которую вы можете искать (имя файла или какое-то правило в нем или какой-либо эффект, который он вызывает).

Ответ 4

Я бы использовал селектор css, подобный этому из виджета jquery.

$('link[href$="my-app.css"]')

Если вы вернете результат, это означает, что есть элемент ссылки, у которого есть href, заканчивающийся на "my-app.css"

Затем используйте эту функцию для проверки конкретного свойства css на элементе, в котором вы находитесь. Я бы предложил что-то конкретное для вас стилей, таких как ширина контейнера, а не нечто вроде -9999 zindex

var getStyle = function(el, styleProp) {
    var x = !!el.nodeType ? el : document.getElementById(el);
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp);
    return y;
}

Подобно этому

getStyle($('#stats-container')[0], "width") 

или

getStyle("stats-container", "width")

Ответ 5

Если вы обеспокоены тем, что не можете редактировать таблицы стилей других людей, вы можете проксировать их через собственную таблицу стилей, используя import

@import url('http://his-stylesheet.css');
.hideErrorMessage{ ... }

Этого достаточно, если вы просто хотите узнать, пытается ли ваш код загружать таблицу стилей, но не поможет, если вам нужно знать, правильно ли загрузилась чужая таблица стилей.