將CSS文件附加到javascript到單個.js文件中

-1

我試圖將所有CSS代碼添加到我的javaScript中，然後通過js文件加載它，我這樣做，問題在哪裏？這是我的js文件的第一行：將CSS文件附加到javascript到單個.js文件中

var innerstyle = '#container{width:800px;background:silver;margin:20px auto;padding:10px;color:gray;border-radius:5px}input{padding:3px}input[name="jsvar"]{width:250px;font-family:courier}#display{border:2px gray solid;border-radius:5px;color:white;margin:10px 0}#display #dtitle{background:gray;border-radius:2px 0;padding:10px 5px}#display #dmsg{min-height:20px}#clear{float:right;cursor:pointer;text-decoration:none;color:white;background:red;padding:2px 10px;border-radius:5px}#clear:hover{background:gold}.rtitle{padding:8px;background:pink;text-align:center}.rtitle input{border:1px solid red;float:right}.rtext{max-height:200px;overflow:auto;margin-bottom:5px}.rtext td{min-width:100px}.secfilter{margin-left:5px}'; 
var styletag = document.createElement('style'); 
var inst = document.createTextNode(innerstyle); 
styletag.appendChild(inst); 
var headref = document.getElementsByName('head'); 
headref.appendChild(styletag);

，這裏是鉻控制檯消息：

Uncaught TypeError: undefined is not a function 
Line 6;

來源

2014-12-06 Francesco

''getElementsByName' [...]返回一個節點列表集合與給定名稱[...]'不一個節點。我敢肯定你正在尋找'getElementsByTagName'而不是'getElementsByName' – 2014-12-06 14:59:34

我不確定你是否可以像這樣注入CSS。嘗試查看http://stackoverflow.com/questions/1720320/how-to-dynamically-create-css-class-in-javascript-and-apply或http://davidwalsh.name/add-rules-樣式表 – ckuijjer 2014-12-06 15:00:56

'.getElementsByName（）'函數用於通過其「名稱」屬性檢索表單字段。你想''.getElementsByTagName（）'在這裏。 – Pointy 2014-12-06 15:03:29

var innerstyle = '#container{width:800px;background:silver;margin:20px auto;padding:10px;color:gray;border-radius:5px}input{padding:3px}input[name="jsvar"]{width:250px;font-family:courier}#display{border:2px gray solid;border-radius:5px;color:white;margin:10px 0}#display #dtitle{background:gray;border-radius:2px 0;padding:10px 5px}#display #dmsg{min-height:20px}#clear{float:right;cursor:pointer;text-decoration:none;color:white;background:red;padding:2px 10px;border-radius:5px}#clear:hover{background:gold}.rtitle{padding:8px;background:pink;text-align:center}.rtitle input{border:1px solid red;float:right}.rtext{max-height:200px;overflow:auto;margin-bottom:5px}.rtext td{min-width:100px}.secfilter{margin-left:5px}'; 
var styletag = document.createElement('style'); 
var inst = document.createTextNode(innerstyle); 
styletag.appendChild(inst); 
//var headref = document.getElementsByName('head'); // Wrong! 
var headref = document.getElementsByTagName('head')[0]; 
headref.appendChild(styletag);

HTML DOM getElementsByName 返回所有元素的集合在DOCUME NT與指定名稱（name屬性的值） （「名‘屬性棄用HTML5和由’ID」屬性爲許多元素代替。您應該使用getElementById感謝@ t.niese）像

<input name="somename" />

document.getElementsByName("somename");

，而不是您可以使用標籤的ID喜歡

<input name="somename" id="theId" />

和查詢與元素：

document.getElementById('theId')

的getElementById返回與指定值

HTML DOM getElementsByTagName(tag) ID屬性找到標籤名稱「標籤」的所有元素，並返回一個數組，如果你發現該元素通過標籤名稱'head'數組中的第一個位置，將是head元素。

來源

2014-12-06 15:01:58 leobr6

只需在下面添加註釋「錯誤！」和_showhow_正確的解決方案並不是一個真正有用的答案。 – 2014-12-06 15:05:05

請不要鏈接到w3schools。儘管他們在很長時間內解決了許多問題，但仍然充滿了缺陷和不準確之處。 – 2014-12-06 15:06:23

@ t.niese感謝您的建議 – leobr6 2014-12-06 15:09:05

該功能document.getElementsByName('head');返回數組。嘗試也許是這樣的

document.getElementsByName('head')[0]

它會給你的名頭瑤池元素head

來源

2014-12-06 15:02:35 georgelviv

將CSS文件附加到javascript到單個.js文件中

回答

相關問題