#css #border #column-width #javascript
#css #граница #ширина столбца #javascript
Вопрос:
Название в значительной степени говорит о том, что я собираюсь сделать, но чтобы уточнить немного больше, я хочу применить некоторый CSS к классу с именем prochart-colitem для пользователей, у которых не включен javascript.
Причина? Я использую проценты для ширины столбца, равные 100%, затем использую javascript для вычитания 2 пикселей из каждого div для границы, которая также добавляется.
Если javascript не включен, столбцы границы составляют более 100% родительского div, и мне нужно вычесть пару пикселей из класса, чтобы он поместился в родительском div для пользователей, не использующих js.
Есть простой способ сделать это? Я пробовал <noscript> с <style> внутри этого, безуспешно.
Комментарии:
1. на самом деле, я немного удивлен, что тег style внутри тега noscript не сработал.
2. Рекомендую Modernizer.js. Все, что вам нужно сделать, это включить его и поместить класс no-script в тег body.
3. Также удивлен, что noscript не работает. Единственное, о чем я могу думать, это было ли это в заголовке документа (в теле это не сработает).
4. элементы в стиле scunliffe и g_thom должны быть в head. Элемент noscript должен иметь дочерний элемент block, элементы block не могут отображаться в head. Таким образом, элемент style в элементе noscript должен быть недопустимым так или иначе.
5. RobG — Я согласен, что это недопустимо, я просто немного удивлен, что это не сработало. Я только что попробовал пример в IE 8, FF и Chrome, и они показали ok.
Ответ №1:
Один из способов приблизиться к этому — всегда добавлять класс CSS к элементам, которым вы хотите придать определенный стиль, а затем, после загрузки, запускать некоторый JavaScript, чтобы удалить эти классы из элементов с этим классом.
В качестве примера (я использую здесь jQuery для простоты, но это, очевидно, можно сделать без библиотеки JS):
$(document).ready(function()
{
$(".nonJsClass").each(function()
{
$(this).removeClass("nonJsClass");
}
}
Где ‘nonJsClass’ имеет правила CSS, которые теперь будут применяться только в том случае, если у пользователя не включен JS.
Комментарии:
1. Отлично, это будет работать именно так, как мне нужно, я просто не мог придумать логику для этого. Спасибо!
2. jQuery(функция ($) { $(‘.nonJsClass’).removeClass(‘nonJsClass’); });
Ответ №2:
Вы могли бы добавить класс к тегу body, который запускает нужный вам CSS, когда JS не включен, а затем сразу после тега body удалить его с помощью JS.
Таким образом, пользователи с поддержкой JS не увидят эффектов специального класса.
Ответ №3:
Включение таблицы стилей в тег noscript было невозможно до HTML5, но это возможно сейчас (при условии, что вы делаете это в «заголовке» документа).
В случае, если JavaScript намеренно отключен или недоступен, значения по умолчанию для таблиц стилей могут обслуживаться через , что вполне допустимо для HTML5.
Ответ №4:
ответ сканлиффа хорош. Альтернативным способом было бы написать стиль CSS, который отображается только в том случае, если включен JavaScript, и предназначен только для нужного вам div, используя цепочку классов:
.prochart-colitem.js-enabled {
/* your JS-specific styles */
}
Затем вы можете использовать jQuery, например, для добавления этого дополнительного класса:
$(document).ready(function() {
$('.prochart-colitem').addClass('js-enabled');
});