下面是一个将CSS样式嵌入到JavaScript文件中的简单示例：
“`html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript and CSS</title>
<style>
body {
background-color: #F7F7F7;
font-family: Arial, sans-serif;
color: #1A1A1A;
.container {
width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
border-radius: 5px;
text-align: center;
h1 {
font-size: 32px;
margin-top: 20px;
margin-bottom: 20px;
p {
font-size: 16px;
line-height: 1.6;
color: #1A1A1A;
</style>
</head>
<body>
<div class=”container”>
<h1>Hello World!</h1>
<p>This is a simple HTML page with a container element. The CSS样式 can be easily嵌入 in the HTML file using JavaScript, and the container element will be formatted to look like a book page.</p>
</div>
<script>
// JavaScript code to嵌入 CSS样式
document.querySelector(“.container”).style.width = “400px”;
document.querySelector(“.container”).style.margin = “0 auto”;
document.querySelector(“.container”).style.padding = “20px”;
document.querySelector(“.container”).style.background = “#fff”;
document.querySelector(“.container”).style.boxShadow = “0 0 10px rgba(0,0,0,0.3)”;
</script>
</body>
</html>
在这个示例中，大家首先定义了一个CSS样式类，用于设置页面的背景颜色、字体大小、段落间距和背景边框等样式属性。然后，大家将这个样式类嵌入到HTML文件中，通过JavaScript来修改样式属性。
通过JavaScript，大家可以使用querySelector方法来找到并获取容器元素，然后使用style属性来修改样式属性。在这个示例中，大家将样式属性的值设置为`400px`、`0 auto`、`20px`、`#fff`和`boxShadow`等值，以使容器元素呈现出一个书籍页面的样式。
除了将CSS样式嵌入到JavaScript文件中，大家还可以使用JavaScript来动态地修改样式。例如，大家可以使用JavaScript来根据页面元素的大小和位置来动态地调整样式，从而实现更加灵活的布局。
在编写JavaScript文件时，可以将CSS样式嵌入到HTML文件中，通过JavaScript来修改样式属性。这种将样式与JavaScript结合使用的方式可以大大提高网页的设计和开发效率，使网页的布局更加灵活和美观。