Загрузите внешний CSS для определенного DIV

Итак, в основном у меня есть страница с собственным CSS. На моем сервере у меня есть папка с разными файлами стиля CSS, поэтому я хочу, чтобы на них было окно предварительного просмотра. Могу ли я каким-то образом, возможно, использовать javascript, применить внешний файл CSS только к определенному DIV, а не ко всей странице, чтобы я мог получить "предварительный просмотр" пользовательского файла CSS? Я бы предпочел не использовать iframes.

Ответ 1

CSS применяется ко всем документам.

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

например. #id_of_div .the .rest .of .the .selector {}

Вы должны применить это к каждому селектору и принять во внимание groups (так что это не так просто, как просто префикс всей таблицы стилей и суффиксом каждого })

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

Кадр, вероятно, будет лучшим подходом к решению этой проблемы.

Ответ 2

Как сказал Квентин, вы можете использовать селектор потомков, чтобы ограничить область действия. Что-то вроде less может многое помочь. Например, я хотел бы иметь "bootstrap.css" применимо только к #MyDiv, в "my.less":

#MyDiv {
  @import "bootstrap.less";
}

"bootstrap.css" следует переименовать (или связать) с "bootstrap.less". Run:

lessc my.less my.css

добавит #MyDiv к каждому селектору в импортированном файле.

Ответ 3

Для одного из моих проектов мне нужно было точно то же самое, но также поддерживалось в CSS версии 2.
После долгого поиска по всему миру я не нашел ничего полезного, поэтому решил создать эту функциональность с помощью JavaScript, который может реально применить целое css к определенному элементу в DOM.

Просто вызовите функцию applyCSSFileToElement, как описано ниже (зависит от библиотеки jQuery):

function renderCSSForSelector(css, selector) {
    return ((css+"")||"").replace(/\n|\t/g, " ")
      .replace(/\s+/g, " ")
      .replace(/\s*\/\*.*?\*\/\s*/g, " ")
      .replace(/(^|\})(.*?)(\{)/g, function($0, $1, $2, $3) {
        var collector = [], parts = $2.split(",");
        for (var i in parts) {
            collector.push(selector + " " + parts[i].replace(/^\s*|\s*$/, ""));
        }
        return $1 + " " + collector.join(", ") + " " + $3;
    });
}

function applyCSSToElement(css, elementSelector) {
    $("head").append("<style type=\"text/css\">" + renderCSSForSelector(css, elementSelector) + "</style>");
}

function applyCSSFileToElement(cssUrl, elementSelector, callbackSuccess, callbackError) {
    callbackSuccess = callbackSuccess || function(){};
    callbackError = callbackError || function(){};
    $.ajax({
        url: cssUrl,
        dataType: "text/css",
        success: function(data) {
            applyCSSToElement(data, elementSelector);
            callbackSuccess();
        },
        error: function(jqXHR) {
            callbackError();
        }
    })
}

Объяснения функций:

renderCSSForSelector - фактически добавляет селектор для каждого определения стиля.
applyCSSToElement - принимает исходные данные CSS, применяет renderCSSForSelector и вводит его в тег HEAD.
applyCSSFileToElement. Применяет файл CSS (cssUrl) в определенную область (elementSelector) в DOM. Вызов callbackSuccess вызывается, когда файл загружен успешно и применяется CSS. Вызов callbackError вызывается при ошибке загрузки файла CSS.

Удачи!

Ответ 4

Вы можете использовать iframe для загрузки страницы предварительного просмотра или динамической загрузки CSS на страницу. Но, если вы хотите, чтобы стили использовались только при применении к div, вы должны префиксные ваши селекторы CSS с идентификатором div. #div-id #element-inside-div { }.

script для его загрузки может выглядеть примерно так:

var cssFile = document.createElement( "link" );
cssFile.rel = "stylesheet";
cssFile.type = "text/css";
cssFIle.href = "file.css";
document.getElementsByTagName( "head" )[0].appendChild( cssFile );