Как получить CSS с помощью встроенных стилей с помощью JQuery

Question

Я загружаю стили динамически из базы данных в моем приложении asp.net mvc (C #).

Я пытаюсь изменить некоторые свойства, такие как (фон, цвет шрифта, размер шрифта, ...) загруженного встроенного стиля. Я использую jquery.rule для этого.

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

Внутренний стиль внутри головы выглядит следующим образом:

<style type="text/css">
    <!
    -- body
    {
        background: #fff;
        margin: 0px;
        padding: 0px;
        font: normal 12px Tahoma, Verdana, Arial;
        color: #636363;
    }
    a
    {
        color: #d0d0d0;
        text-decoration: none;
    }
    #header
    {
        padding-left: 35px;
        height: 60px;
        vertical-align: middle;
        padding-top: 25px;
    }
    -- ></style>

Мне нужно обновить встроенный стиль. Как это сделать?

Answer 1

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

Вы пытаетесь прочитать объявления встроенного стиля элемента на странице? Если это так, это сложно. Теоретически вы должны быть в состоянии вызвать element.getAttribute('style') или эквивалент jQuery. Однако доступ к атрибуту DOM не работает в IE; фактически IE вообще не хранит атрибут, используемый в документе, а только проанализированные объявления стиля, которые вытекают из него.

Не существует специфического для jQuery способа чтения всех стилей, но вы можете получить эффективные правила встроенного стиля в виде CSS, используя DOM Level 2 Style .

var style= element.style.cssText;

Но в IE это отделит любые свойства ярлыков, которые вы использовали, например, установка border может привести к возврату border-style, border-color и border-width. IE также будет прописывать имена свойств в верхнем регистре. Это может иметь или не иметь значения для вас.

Возможно, вам лучше запомнить запрограммированные изменения стиля в отдельном объекте поиска, чтобы вам было легче его читать. Вы можете присоединить это к элементу, используя метод jQuery data(), внести все изменения в объекты 'real' element.style и lookup $(element).data('stylestore'), а затем извлечь все установленные стили из поиска, когда вы собираетесь опубликовать.

Answer 2

Используйте метод jQuery ajax для публикации сериализованных данных формы в методе действий:

$.ajax({
   type: "POST",
   url: "/YourController/UpdateCss",
   data: "font=arial&color=#fff&font-size=10px"
   success: function(result){
      // handle your result here
   }
});

Затем вы можете получить доступ к опубликованным данным в действии вашего контроллера через "FormCollection":

[AcceptVerbs(HttpVerbs.Post)]
public String UpdateCss(FormCollection form)
{
    // handle your form here
    return "Success";
}

Надеюсь, это поможет

-Марк