Question

我的页面中有一个内联样式：

<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更新或添加一些样式到内联样式..

我正在尝试使用jquery更新页面/ divs / controls的字体，背景颜色。我将使用我的内联样式（从数据库加载）来获取页面内容的样式。我的应用程序的用户可以更改某些样式并将其更新回数据库。

它几乎就像创建自定义页面应用程序（c＃中的asp.net mvc）。

如何使用jquery更改页面的内联样式？还是有其他有效的方法吗？

Answer 1

在普通的jQuery中有一个.css()函数，所以你可以说

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

请参阅jQuery CSS

Answer 2

尝试jQuery.Rule

然后你会这样做：

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

将身体的背景颜色改为眼睛燃烧的红色。

如果您只想添加或覆盖特定内容，可以使用常规jQuery根据id / class向特定元素添加style属性：

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

如何使用jquery更改页面的内联样式

2 个答案: