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

回答

相關問題