createStyleSheet()函式的用法

antzone發表於2017-03-26
函式

本章節介紹一下createStyleSheet()函式的一些相關作用，因為相容性的問題，它的出現頻率較少，但是在一些程式碼中還是有它身影的出現，下面對它做一下簡單介紹，希望能夠給需要的朋友帶來一定的幫助。

此函式可以載入一個外部js檔案。

如果引數省略，那麼就是建立一個<style>元素。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
document.createStyleSheet(url,index)

引數解析:

1.url:可選，規定引入css檔案的url地址。

2.index:可選，規定在styleSheets集合中的索引位置，預設是最後一個。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript">  
window.onload=function(){
  document.createStyleSheet("antzone.css")
}
</script>  
</head>  
<body>  
<div>螞蟻部落</div>
</body>  
</html>

引入外部antzone.css檔案，但是具有很大的瀏覽器相容性問題，只有IE11以下瀏覽器支援document.createStyleSheet()。

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript">  
window.onload=function(){
  var style=document.createStyleSheet();
  var cssText="body{color:red}";
  style.cssText=cssText;
}
</script>  
</head>  
<body>  
<div>螞蟻部落</div>
</body>  
</html>

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

相關文章