如何使用jQuery获取嵌入式样式的css

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的方式，但是您可以使用DOM Level 2 Style作为CSS获得有效的内联样式规则。

var style= element.style.cssText; 

但在IE浏览器，这将分离所使用的任何快捷方式的属性，例如设置border可能会导致你得到border-style，border-color和border-width回。 IE也会大写属性名称。这对你来说可能并不重要。

您可能会更好地记住您在单独的查找对象中进行的内联样式更改，以便您可以更轻松地阅读它。您可以使用jQuery的data()方法将其附加到元素，对“真实”element.style和查找$(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"; 
} 

希望这有帮助

-Mark