JavaScript 動態建立style標籤

antzone發表於2017-03-26
JavaScript

實際應用中，可能需要動態建立一個內聯樣式表，注意這裡是內聯樣式表，不是寫在元素標籤中的內嵌方式。

下面就通過程式碼例項介紹一下如何實現此功能。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<script>  
function add_css(str_css){
  var style=document.createElement("style");
  style.type="text/css";
  style.innerHTML=str_css;
  document.getElementsByTagName("head").item(0).appendChild(style);
}
add_css("div{color:red}")
</script>  
</head>  
<body>  
<div id="thediv">螞蟻部落</div>
</body>  
</html>

上面你的程式碼可以將div中的字型顏色設定為紅色。

一.程式碼註釋：

（1）.function add_css(str_css)，引數要是要設定的css程式碼內容，一個字串。

（2）.var style=document.createElement("style")，建立一個style標籤。

（3）.style.type="text/css"，設定style標籤的type屬性。

（4）.style.innerHTML=str_css，設定style標籤的內容。

（5）.document.getElementsByTagName("head").item(0).appendChild(style)，將style標籤新增到head標籤中，item()函式可以根據索引獲取集合中的內容。

二.程式碼註釋：

（1）.createElement方法參閱JavaScript createElement()一章節。

（2）.innerHTML屬性參閱JavaScript innerHTML一章節。

（3）.getElementsByTagName方法參閱getElementsByTagName()一章節。 

（4）.item方法參閱JavaScript item()一章節。

相關文章