0

Хочу применить 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;
}

3
  • 1
    А где в js вы подключаете родительский класс .calendar?
    – Quazimorda
    9 окт 2020 в 8:25
  • Пропустил, спасибо. А без html никак нельзя?
    – Вадим
    9 окт 2020 в 9:42
  • 1
    А где без html у вас будет выполняться js? До сих пор вроде в браузерах всё отрабатывало. ))
    – Quazimorda
    9 окт 2020 в 9:45

1 ответ 1

-1

Подключите файл со стилями в html-файле и используйте стили из этого файла в вашем js. Зачем вообще что-то изобретать? ссы не является модулем с точки зрения javascript - его так не нужно подключать.

5
  • у меня динамически в JS пишется календарь, html мне в принципе вообще не нужен. Из JS стили CSS подключаются таким способом: import './style.css', но раньше для просмотра я пользовался parcel, а тут совсем маленький код - не хотел его ставить, поэтому думал через html его запустить, т.к. в WebStorm на запуск просто JS ругается, а просто вставить код в пустую страницу браузера - не видит где лежит CSS файл
    – Вадим
    9 окт 2020 в 7:52
  • Повторюсь, js у вас вызывается из index.html и стили стоит прописать там же.
    – Quazimorda
    9 окт 2020 в 7:55
  • Так пробовал - JS отрабатывает, а стили не подтягивает
    – Вадим
    9 окт 2020 в 8:02
  • Приведите уже пример вашего index.html с подключенными стилями и js.
    – Quazimorda
    9 окт 2020 в 8:10
  • добавил код в вопрос
    – Вадим
    9 окт 2020 в 8:19

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.