Html元素绑定像xaml

我有一个全球性的CSS文件，与一个HTML元素，风格代码是巨大的，但不同的网页与这种风格有一点不同，我不想复制多个，只修改一个或样式代码的两行，是否有一种方法将html元素绑定到css文件，以便它可以具有不同的版本，就像在xaml中一样，我们可以将viewmodel的属性绑定到样式，以便它可以动态加载样式。Html元素绑定像xaml

来源

2013-04-25 James

作为一个免责声明，我对XAML知之甚少。但是，如果您只是想使用全局样式表来提供常用样式，然后除了少数几个例外，就可以链接到特定的样式表（在html文件中较低，因此最后加载），其中包含你想做的改变。

例如：

//global stylesheet 
... 
.classname { 
color:blue; 
font-family:Arial; 
... 
}

//stylesheet specific to that page 
... 
.classname { 
color:red; //include changes 
//If you don't need a style declaration changed, just leave it blank 
... 
}

来源

2013-04-25 02:34:57 FireOak

但不必加载一个巨大的样式表的问题仍然是相同的。 – bicycle 2013-04-25 02:37:01

我的印象是，每个页面与其他页面只有很小的差异，大部分的声明都是通用的。在那个场景中，一个巨大的样式表是不可避免的，但它可以将常用规则分离成单个可缓存的全局样式表和更小的页面特定表单。 – FireOak 2013-04-25 03:34:14

你可以做的是动态加载你需要的页面的CSS文件。如何做到这一点有多种方式。既然你没有指定是否使用jQuery，你可以使用

function loadjscssfile(filename, filetype){ 
if (filetype=="js"){ //if filename is a external JavaScript file 
    var fileref=document.createElement('script') 
    fileref.setAttribute("type","text/javascript") 
    fileref.setAttribute("src", filename) 
} 
else if (filetype=="css"){ //if filename is an external CSS file 
    var fileref=document.createElement("link") 
    fileref.setAttribute("rel", "stylesheet") 
    fileref.setAttribute("type", "text/css") 
    fileref.setAttribute("href", filename) 
} 
if (typeof fileref!="undefined") 
    document.getElementsByTagName("head")[0].appendChild(fileref) 
}

所以，你可以这样做：

loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file

来源：http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

有多种插件，允许你做这也通过jQuery。你只需要搜索它们。

来源

2013-04-25 02:29:48 bicycle

Html元素绑定像xaml

回答

相关问题