如何從HTMLStyleElement元素獲取CSSStyleSheet對象

是否可以從HTMLStyleElement（document.createElement('style')）獲取CSSStyleSheet對象（document.styleSheets[0]）？如何從HTMLStyleElement元素獲取CSSStyleSheet對象

我想動態地添加css規則到未插入的文檔中，但<style>元素。

來源

2012-01-18 Franck Freiburger

在這裏，你有答案： [http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript][1] [ 1]：http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript – netadictos 2012-01-18 16:37:33

感謝netadictos，但主題略有不同 – 2012-01-18 16:40:10

我認爲你可以克隆文檔刪除從克隆中添加樣式表並添加新樣式表並獲取對象並再次刪除文檔克隆。 – noob 2012-01-18 17:02:56

您可以在將樣式元素添加到文檔之前添加規則。

一對夫婦的筆記 -

較早的IE瀏覽器無法子節點添加到樣式元素，所以分配給該元素的styleSheet.csstext屬性他們。確保將新元素附加到文檔的頭部。

function addStyle(css, media1, title1){ 
    var el= document.createElement('style'); 
    el.type= 'text/css'; 
    if(media1) el.media= media1; 
    if(title1) el.title= title1; 
    if(el.styleSheet) el.styleSheet.cssText= css;//IE 
    else{ 
     el.appendChild(document.createTextNode(css)); 
    } 
    //return el without the next line if you want to append it later 
    return document.getElementsByTagName('head')[0].appendChild(el); 

} 

var cs1= [ 
    '#yw_psq, #yw_psq h2{background-color: green; color: white;}', 
    '#yw_psq_div{margin: 1ex; position: relative; text-align: center;}', 
    '#ps_counter{color: white; margin: 1ex 0 0 0; text-align: center;}', 
    '#pzsq_grid button{cursor: pointer; font-size: 1.2em; width: 100%;}', 
    '#delaySpan{font-weight: bold; margin-left: 1em;}' 
] 

addStyle(cs1.join('\n'),'screen','yw_psq');

來源

2012-01-18 16:58:15 kennebec

'document.createElement（「style」）'在XHTML5文檔中不起作用，因爲它會創建一個沒有名稱空間的元素，這意味着元素只會從HTMLElement接口繼承它的屬性，因此它基本上是一個空白元素沒有特殊的屬性。爲了解決這個問題，你必須使用document.createElementNS（「http://www.w3.org/1999/xhtml」，「style」）來使它在XHTML5文檔中工作。 – 2017-12-21 17:17:45

如果您有權訪問要插入的元素，則可以像添加其他元素一樣向其添加樣式信息。一旦插入元素，瀏覽器將重新流動頁面，並將採用任何適用的相關CSS規則。您不需要訪問樣式表來設置元素的樣式，只需訪問該元素即可。

來源

2012-01-18 16:36:59 cdeszaq

下面是我平時MITH我的JavaScript來創建一個新的樣式表，並獲得其CSSStyleSheet對象mycss（而不是HTMLStyleElement通過appendChild返回）：

document.head.appendChild(document.createElement("style")).setAttribute("type", "text/css"); 
var mycss = document.styleSheets[document.styleSheets.length-1];

那麼這裏就是我如何添加樣式規則：

mycss.insertRule("css, selectors { cool: styles; and: stuff; }", mycss.cssRules.length);

希望這會有所幫助。

來源

2014-06-20 17:11:26 jesus2099

它是可能從<style>元素獲取CSSStyleSheet對象。

var style = document.createElement('style'); 
document.head.appendChild(style); 
var styleSheet = style.sheet // Will give you the associated CSSStyleSheet

這隻會工作後<style>元素被添加到該文件。

沒有特別有據可查的記錄，並且很難通過在控制檯中四處查找。

來源

2014-07-09 19:25:03

我想你可以通過使另一個應用到主文檔：var newDoc = document.implementation.createHTMLDocument（）; newDoc.head.appendChild（myStyleElement）'。在FF中，顯然只要獲得'newDoc.styleSheets [0] .cssRules'，但是Chrome返回的是未定義的，所以我必須將myStyleElement作爲一個元素，然後我才能處理'.sheet.cssRules'。（沒有看過其他的瀏覽器，因爲我的項目只是一個用戶腳本。）但是，瘋狂的我很少能找到這個'.sheet'屬性。 – 2016-04-01 00:42:10

如何從HTMLStyleElement元素獲取CSSStyleSheet對象

回答

相關問題