到目前为止，我发现了非常复杂的信息…如何使用JavaScript简单地将这些CSS元素添加到相同的HTML文件中?提前非常感谢!
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.6rem;
padding: 1rem;
}
ul {
list-style-type: disc;
padding: 1rem 1rem 1rem 4rem;
list-style: 1.5;
list-style-position: inside;
}
h1 {
font-size: 24px;
color: rgb(247, 34, 211);
padding-bottom: 2rem;
}
h2 {
font-size: 2.4rem;
margin-bottom: 1rem;
}
您可以创建一个这样的类:
.bodystyle {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.6rem;
padding: 1rem;
}
并使用js将其添加到body元素中:
document.querySelector("body").classList.add("bodystyle")
我猜你必须在javascript中使用属性样式:
document.getElementById("myH1").style.color = "red";
或在HTML中添加样式页:
<head>
<title>
Load CSS file using JavaScript
</title>
<script>
// Create new link Element
var link = document.createElement('link');
// set the attributes for link element
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'style.css';
// Get HTML head element to append
// link element to it
document.getElementsByTagName('HEAD')[0].appendChild(link);
</script>
您可以使用此链接获取更多信息
听起来好像您想要做的是在当前HTML的头部添加一个样式表。
这就像在现有HTML中添加任何其他元素一样。创建一个style元素，将你想要的CSS放入其中，将style元素添加到HTML的head元素中。
显然，要查看运行此代码片段的效果，您必须查看浏览器的开发工具检查工具，以查看新样式表已添加到head元素的末尾。
const stylesheet = document.createElement('style');
stylesheet.innerHTML = `body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.6rem;
padding: 1rem;
}
ul {
list-style-type: disc;
padding: 1rem 1rem 1rem 4rem;
list-style: 1.5;
list-style-position: inside;
}
h1 {
font-size: 24px;
color: rgb(247, 34, 211);
padding-bottom: 2rem;
}
h2 {
font-size: 2.4rem;
margin-bottom: 1rem;
}`;
document.querySelector('head').appendChild(stylesheet);<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>