Хочу применить css к тегам написанным в JS. В файл index.js подключаю css при помощи import './style.css'
, в index.html подключаю JS при помощи <script src="index.js"></script>
. Запускаю в браузере index.html - пишет: Uncaught SyntaxError: Cannot use import statement outside a module (и указывает на строку import './style.css' в index.js).
Как правильно подключить css в JS?
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="index.js"></script>
</body>
</html>
index.js:
// import './style.css'
const daysOfWeek = ['<th>Пн</th><th>Вт</th><th>Ср</th><th>Чт</th><th>Пт</th><th>Сб</th><th>Вс</th>']
let year = new Date().getFullYear() // узнаем текущий год
let date = new Date(year, 0, 1); // устанавливаем дату 1 января текущего года
let dayOfWeek = date.getDay(); // узнаем день недели первого числа текущего года
// получаем пустые <td></td> в первой строке
let firstStringEmpty = []
for (let i = 1; i < dayOfWeek; i++) {
firstStringEmpty.push(`<td></td>`);
}
// получаем дни в первой строке
let dayOfMonth = []
let number = 1
for (let i = dayOfWeek; i <= 7; i++, number++) {
dayOfMonth.push(`<td>${number}</td>`)
}
let firstString = firstStringEmpty.concat(dayOfMonth)
document.write(`<div class="calendar"><table>
<tr>
<caption><span>январь</span> ${year}</caption>
</tr>
<tr>
${daysOfWeek}
</tr>
<tr>
${firstString.join('')}
</tr>
</table></div>`)
style.css:
.calendar {
border: 1px solid #bbb;
display: inline-block
}
.calendar table {
empty-cells: hide;
}
.calendar caption {
padding: 3px;
background: linear-gradient(to bottom, #ddd 10%, #bbb);
}
.calendar td {
padding: 2px 6px;
text-align: center;
border: 1px solid #ccc;
background: linear-gradient(to bottom, #fff 10%, #ddd);
border-radius: 0 0 3px
}
.calendar td:hover {
border: 1px solid #888;
}
.calendar .holiday {
background: linear-gradient(to bottom, #fff 10%, #ffc);
}
.calendar .today {
font-weight: 600;
border: 1px solid #888;
}
const daysOfWeek = ['<th>Пн</th><th>Вт</th><th>Ср</th><th>Чт</th><th>Пт</th><th>Сб</th><th>Вс</th>']
let year = new Date().getFullYear() // узнаем текущий год
let date = new Date(year, 0, 1); // устанавливаем дату 1 января текущего года
let dayOfWeek = date.getDay(); // узнаем день недели первого числа текущего года
// получаем пустые <td></td> в первой строке
let firstStringEmpty = []
for (let i = 1; i < dayOfWeek; i++) {
firstStringEmpty.push(`<td></td>`);
}
// получаем дни в первой строке
let dayOfMonth = []
let number = 1
for (let i = dayOfWeek; i <= 7; i++, number++) {
dayOfMonth.push(`<td>${number}</td>`)
}
let firstString = firstStringEmpty.concat(dayOfMonth)
document.write(`<div class="calendar"><table>
<tr>
<caption><span>январь</span> ${year}</caption>
</tr>
<tr>
${daysOfWeek}
</tr>
<tr>
${firstString.join('')}
</tr>
</table></div>`)
.calendar {
border: 1px solid #bbb;
display: inline-block
}
.calendar table {
empty-cells: hide;
}
.calendar caption {
padding: 3px;
background: linear-gradient(to bottom, #ddd 10%, #bbb);
}
.calendar td {
padding: 2px 6px;
text-align: center;
border: 1px solid #ccc;
background: linear-gradient(to bottom, #fff 10%, #ddd);
border-radius: 0 0 3px
}
.calendar td:hover {
border: 1px solid #888;
}
.calendar .holiday {
background: linear-gradient(to bottom, #fff 10%, #ffc);
}
.calendar .today {
font-weight: 600;
border: 1px solid #888;
}