Изменить более 1 CSS файл с JavaScript

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

$("button").click(function(){ 
    $("p").css("color","red"); 
});

Как я могу говорить, это эффективный способ изменить локальную таблицу стилей CSS, относящуюся к нашему HTML, во время работы веб-страницы (т.е. нажатие кнопки div).

Что я пытаюсь сделать, это изменить конкретный .class из таблицы стилей CSS плагина jQuery для замены стандартного контекстного меню контекстного меню.

я не нашел ни одного пути в JS для называем конкретные таблицы стилей для изменения любых .class или #id

Так что мой HTML имел следующие определения:

<script src="jquery.contextmenu.js"></script> 
<link rel="stylesheet" href="jquery.contextmenu.css"> 
<link rel="stylesheet" href="localstyle.css">

Но когда я попробуйте обновить пользовательский JQuery CSS с помощью сценария, как этого

$('#red').click(function(){ 
    $('.contextMenuPlugin').css({'background-color': 'white'});

.contextMenuPlugin (родной в jquery.contextmenu.css) не признаются, этот скрипт работает только с .class или #id из моей собственной таблицы стилей (localstyle.css).

Я пытаюсь использовать мой локальный CSS, встроенный в HTML, и ссылаясь на jQuery CSS с идентификатором, но все равно ничего не меняется. Таким образом, есть ссылка на Github репозиторий с JQuery плагин:

https://github.com/joewalnes/jquery-simple-context-menu

Я пытаюсь сделать живой, но JSfiddle dosn't работу на всех с этим proyect, так что если это помогает или кто-то хочет проверить это, есть Pastebin выпуска:

http://pastebin.com/u/27GRiS (4 файла)

Я надеюсь, что кто-то поможет мне прояснить это, заранее спасибо, Федерико.

источник

2014-01-31 sietedosfede

После css вы действительно должны иметь

Возьмите код <script> из <head> и положите его в конец <body>.

Также вам не нужно это:

$(function() { ... })

, если у вас уже есть это:

$(document).ready(function() { ... })

Другими словами, удалить строки 29 и строки 27 ($(function() { и });) from this file

источник

2014-01-31 23:18:12 Deryck

Вы правы, но в чем разница между установкой скрипта в тело вместо головы? Спасибо за обзор! – sietedosfede

Скрипт запускается до того, как DOM полностью загружен, и элементы не должны быть изменены во время его выполнения. Кроме того, это обычная практика уменьшения латентности загрузки, так как запуск сценария сначала заблокирует остальную часть DOM от загрузки до ее завершения (за вычетом функций ASYNC). Помещение в конец тела позволяет DOM загружаться, а в скрипте есть что искать. – Deryck

Проблема в том, что вы думаете, что

$('.contextMenuPlugin').css({'background-color': 'white'});

создает таблицу стилей с

.contextMenuPlugin { background-color: white }

Но это не так.

$('.contextMenuPlugin') получает все элементы с классом contextMenuPlugin в момент его использования, а затем .css({'background-color': 'white'}) изменяет встроенный стиль каждого элемента.

Это означает, что при создании новых элементов с классом contextMenuPlugin после этого кода они не будут затронуты.

Затем, вы можете:

Убедитесь, что ваш целевой элемент существует, когда вы используете код
Создание таблицы стилей с желаемым CSS

Некоторое время назад, я создал которая добавляет желаемые правила в таблицу стилей и позволяет вам ссылаться и изменять/удалять их. Вы можете увидеть его в this answer.

источник

2014-01-31 23:26:51 Oriol

У вас есть причина. Нет элемента с тегом класса .contextMenuPlugin! Но теперь, как изменить элемент класса, который находится во внешнем файле jquery.contextmenu.js из моего HTML-индекса? – sietedosfede

@sietedosfede Не уверен, что вы имеете в виду. – Oriol

Извините за мое заблуждение, что я пытаюсь сказать, как я могу изменить пользовательский CSS, который будет применяться к контекстному контексту контекстного меню правой кнопкой мыши, а не к дому HTML? Его нужно запускать из HTML? Причина, я могу изменить правила CSS контекстного меню, пока веб не запущен, обновите его и получите изменение: но я не могу сделать то же самое, что работает в Интернете, с помощью пользовательского интерфейса CSS для выбора пользовательских стилей ... – sietedosfede

Смежные вопросы