Question

我试图将我的所有CSS代码附加到我的javaScript中，然后通过js文件加载它，我这样做，问题出在哪里？这是我的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);

这是Chrome控制台消息：

Uncaught TypeError: undefined is not a function
Line 6;

Answer 1

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 使用指定的名称（名称属性的值）返回文档中所有元素的集合 （“名称”属性在HTML5中已弃用，并被许多元素的“ id ”替换。您应该使用getElementById感谢@ t.niese）喜欢

<input name="somename" />

document.getElementsByName("somename");

相反，您可以使用标签的ID，如

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

并使用：

查询元素

document.getElementById('theId')

getElementById返回具有指定值

的ID属性的元素

HTML DOM getElementsByTagName(tag)找到标签名为“tag”的所有元素并返回一个数组，如果你通过标签名称'head'找到数组中的第一个位置，那么就是head元素。

Answer 2

此函数document.getElementsByName('head');返回数组。尝试类似这样的事情

document.getElementsByName('head')[0]

它会给你第一个名为head

的finded元素

将CSS文件附加到javascript中为单个.js文件

2 个答案: