2009-11-12 3 views
0

У меня есть встроенные стили в моей странице, как:как изменить встроенный стиль страницы с помощью JQuery

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>:: Inline Style Page ::</title> 
<style type="text/css"> 
    <!-- 
    body 
    { 
     background: #fff; 
     font: normal 12px Tahoma, Verdana, Arial; 
     color: #636363; 
    } 
    #header 
    { 
     height: 60px; 
    } 
    #menu 
    { 
     background: #fff; 
     height: 30px; 
    } 
    #footer 
    { 
     height: 50px; 
     background: #fff; 
    } 
    --> 
</style> 

мне нужно обновить или добавить некоторые стили стили инлайн с помощью JQuery. .

Я пытаюсь обновить шрифт, цвет фона страницы/divs/controls, используя jquery. У меня будут встроенные стили (загруженные из базы данных) для стиля содержимого моей страницы. Пользователь моего приложения может изменить некоторые стили и обновить его до базы данных.

Его почти как создание пользовательского приложения для страницы (asp.net mvc в C#).

Как изменить встроенные стили страницы с помощью jquery? или есть ли другой эффективный способ сделать это?

ответ

1

Попробуйте jQuery.Rule

Тогда вы могли бы сделать:

$.rule('body { backgound-color: #ff0000 }').appendTo('style'); 

изменить цвет фона тела для глаз горящий красный.

Если вы просто хотите добавить или переопределить конкретные вещи, которые вы можете использовать регулярное JQuery добавить атрибут style к конкретным элементам на основе ид/класса:

// add to element with id="foo" 
$('#foo').attr("style", {backgroundColor: "#ff0000"}) 
// add to ALL elements with class="bar" 
$('.bar').attr("style", {backgroundColor: "#ff0000"}) 
+0

Благодарности Beggs. я попробую это – Prasad

+0

Также см. этот вопрос: http://stackoverflow.com/questions/1720320/how-to-dynamically-create-css-class-in-javascript-and-apply это может помочь. – beggs

+0

Можно ли изменить css внутри iframe с помощью jquery.rule? – Prasad

4

В простом JQuery есть .css() функции, так вы могли бы просто сказать

$("#header").css("height", "150px"); 

См jQuery CSS

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