极客教程JavaScript 如何创建样式标签
使用document.createElement（’style’）方法可以使用JavaScript创建样式元素。创建样式元素的步骤如下：
步骤：
- 使用以下语法创建样式元素
语法：
document.createElement('style');
-
应用CSS样式。
-
将此样式元素附加到head元素。
语法：
document.getElementsByTagName("head")[0].appendChild(styleElement);
示例 1： 通过使用JavaScript创建样式元素，此示例将<h1>的颜色更改为绿色。
<!DOCTYPE html>
<html>
<head>
<title>
Create style tag using JavaScript
</title>
</head>
<body>
<h1>GeeksForGeeks</h1>
<!-- Script to add style element -->
<script type="text/javascript">
/* Function to add style element */
function addStyle(styles) {
/* Create style document */
var css = document.createElement('style');
css.type = 'text/css';
if (css.styleSheet)
css.styleSheet.cssText = styles;
else
css.appendChild(document.createTextNode(styles));
/* Append style to the tag name */
document.getElementsByTagName("head")[0].appendChild(css);
}
/* Set the style */
var styles = 'h1 { color: green }';
styles += ' body { text-align: center }';
/* Function call */
window.onload = function() { addStyle(styles) };
</script>
</body>
</html>
输出：
示例 2： 此示例通过使用JavaScript创建样式元素，将<h1>文本颜色更改为白色，并将<h1>元素的背景颜色更改为绿色。
<!DOCTYPE html>
<html>
<head>
<title>
Create style tag using JavaScript
</title>
</head>
<body>
<div id="header">
<h1>GeeksForGeeks</h1>
</div>
<!-- Script to create style tag -->
<script type="text/javascript">
/* Function to add style */
function addStyle(styles) {
/* Create style element */
var css = document.createElement('style');
css.type = 'text/css';
if (css.styleSheet)
css.styleSheet.cssText = styles;
else
css.appendChild(document.createTextNode(styles));
/* Append style to the head element */
document.getElementsByTagName("head")[0].appendChild(css);
}
/* Declare the style element */
var styles = 'h1 { color: white }';
styles += ' body { text-align: center }';
styles += ' #header { height: 50px; background: green }';
/* Function call */
window.onload = function() { addStyle(styles) };
</script>
</body>
</html>
输出：
