Почему мой CSS работает только в функциях JS, загруженных ДО тега <html>?

Я «исправил» свой код, что, конечно, его сломало. Я долго играл с ним, прежде чем вернуться к тому, что было до того, как я его починил. Я не понимаю, почему это работает ТОЛЬКО так, поэтому я пытаюсь научиться.

Когда я размещаю вызов своего кода функций javascript (_functions.js) перед тегами <html> и <head>, функции прекрасно воспринимают CSS. Когда я помещаю код в свою голову, он вообще не воспринимает CSS. Мой CSS работает, как и ожидалось, в остальной части моего документа.

Стили загружаются для моих функций JS, когда мой код в header.php выглядит так:

<?php
echo <<<HTML
<script src='{$_(URL_CTB)}/includes/_functions.js?v-1.10'></script> // <!-- THIS loads CSS info --> 
<!DOCTYPE html>
<html>
<meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8">
<head>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js'></script>
    <link rel='stylesheet' type='text/css' href='{$_(URL_CTB)}/includes/jquery-ui-1.13.2.custom/jquery-ui.min.css'>
    <script type = "text/javascript" src = "{$_(URL_CTB)}/includes/clockpicker/dist/jquery-clockpicker.js"></script>
    <link rel='stylesheet' type='text/css' href='{$_(URL_CTB)}/includes/clockpicker/dist/jquery-clockpicker.css'>
    <link rel='stylesheet' type='text/css' href='{$_(URL_CTB)}/styles/ctb.css?v1.10'> <!- THIS CSS -->

    <link rel='icon' href='{$_(URL_CTB)}/favicon.ico?v=0.20' />
HTML . PHP_EOL;

И мои кнопки выглядят так:

Кнопки в стиле CSS

... но когда я делаю это:

<?php
echo <<<HTML
<!DOCTYPE html>
<html>
<meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8">
<head>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js'></script>
    <link rel='stylesheet' type='text/css' href='{$_(URL_CTB)}/includes/jquery-ui-1.13.2.custom/jquery-ui.min.css'>
    <script type = "text/javascript" src = "{$_(URL_CTB)}/includes/clockpicker/dist/jquery-clockpicker.js"></script>
    <link rel='stylesheet' type='text/css' href='{$_(URL_CTB)}/includes/clockpicker/dist/jquery-clockpicker.css'>
    <script src='{$_(URL_CTB)}/includes/_functions.js?v-1.10'></script> <!-----HERE CSS WON'T work-->
    <link rel='stylesheet' type='text/css' href='{$_(URL_CTB)}/styles/ctb.css?v1.10'> <!-- THIS CSS -->

    <link rel='icon' href='{$_(URL_CTB)}/favicon.ico?v=0.20' />
HTML . PHP_EOL;

... мои кнопки выглядят так:

скучные не CSS кнопки

_functions.js выглядит так:

function fnListButtons(elementId, jsonButts) {
    let aButts = JSON.parse(jsonButts);
    for (let aBtnVals of aButts) {
        let btn = document.createElement('button');
        btn.type = 'button';
        btn.value = aBtnVals[0];
        btn.innerHTML = aBtnVals[1];
        btn.classList.add('CTBButton', 'CTBSubmitBtn');
        btn.style.margin = '4px';
        switch (aBtnVals[2]) {
            case 'orange':
                btn.style.fontWeight = 'bold';
                btn.classList.add('CTBOrangeBtn');
                break;
            case 'green':
                btn.style.fontWeight = 'bold';
                btn.classList.add('CTBGreenBtn');
                break;
            default:
                btn.style.fontWeight = 'normal';
            }
            document.getElementById(elementId).appendChild(btn);
            btn.onclick = function () {
            fnClickButton(this.value);
        }
    }
}

function fnClickButton(sURL) {
    location.href = sURL;
}

function delay(msecs) {
    return new Promise(resolve => setTimeout(resolve, msecs));
}

Он вызывается из функции PHP с именем fnButtons, сохраненной в файле с именем _functions.php, частично приведенном здесь:

<?php
date_default_timezone_set('US/Eastern');

define('SECS', 1);
define('MINS', SECS*60);
define('HOURS', MINS*60);
define('DAYS', HOURS*24);
define('WEEKS', DAYS*7);
define('YEARS', DAYS*365);
// ... other constants

if (isset($_SERVER['HTTP_REFERER'])) {
    define('REF_URL', $_SERVER['HTTP_REFERER']);
} else {
    define('REF_URL', '');
}

/*
...many other php functions here
*/

function fnC($v){return($v);};
$_ = 'fnC';

function fnButtons($aButtons) { // <----my button building code
    $jsonButts = json_encode($aButtons);
    echo <<<HTML
        <div id='menu_butts' style='text-align:center;'>
            <script>
                fnListButtons('menu_butts', '$jsonButts');
            </script>
        </div>
    HTML . PHP_EOL;
}

Мой основной код начинается так:

?php
require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/_functions.php'; // <---my main PHP functions
require_once DOC_CTB . '/includes/_day_params.php';
require_once DOC_CTB . '/includes/_rrules_mine.php';
use RRule\RRule;

require_once DOC_CTB . '/includes/header.php'; // <--- my header file
echo <<<HTML
    <meta name = "viewport" content = "width=device-width, initial-scale=1" />
<!--...-->

    <title>List Tasks</title>
</head>
<body>
HTML . PHP_EOL;

// GET PASSED URL PARAMETERS
$aTask_Types = (isset($_GET['type'])) ? (array) $_GET['type'] : [];
$iWhere = (isset($_GET['where'])) ? (int) $_GET['where'] : -1;

fnPageTitle('List Tasks');

$aButtons = [];
$aButtons[] = [URL_CTB . '/edit_task.php?new=true', 'Add New Task', 'green'];
if (THIS_URL !== $URL_no_type) {
    $aButtons[] = [URL_CTB . '/list_tasks.php', 'List All Tasks', ''];
}
if (!in_array("today", $aTask_Types)) {
    $aButtons[] = [URL_CTB . '/list_tasks.php?type=today', 'List Today Only', ''];
}
$aButtons[] = [URL_CTB . '/list_notes.php', 'List Notes', ''];
$aButtons[] = [URL_CTB . '/edit_note.php', 'Add New Note', 'green'];
fnButtons($aButtons);

Мой код css выглядит примерно так:

:root {
    --CTBGREEN:#229999;
    --CTBGREENM:#6cbbbb;
    --CTBGREENL:#E2F2F2;
    --CTBBLUE:#2EA3F2;
    --CTBBLUEL:#9FD5F9;
    --CTBRED:#750000;
    --CTBORANGE:#E97A00;
    --CTBORANGEL:#FEB658;
}
.ctbButton {
    box-shadow:inset 0px 1px 0px 0px #bbdaf7;
    background:linear-gradient(to bottom, var(--CTBBLUEL) 5%, var(--CTBBLUE));
    background-color: var(--CTBBLUEL);
    border-top-left-radius:6px;
    border-top-right-radius:6px;
    border-bottom-right-radius:6px;
    border-bottom-left-radius:6px;
    text-indent:0;
    border:1px solid #84bbf3;
    display:inline-block;
    color:white !important;
    font-family:Arial;
    font-size:15px;
    font-weight:bold !important;
    font-style:normal;
    height:27px;
    line-height:27px;
    width:fit-content;
    padding-left:8px;
    padding-right:8px;
    padding-bottom:0px;
    padding-top:0px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0 #507ca8, -1px 1px 0 #507ca8, 1px -1px 0 #507ca8, -1px -1px 0 #507ca8;
}.ctbButton:hover {
    background:linear-gradient(to bottom, var(--CTBBLUE) 5%, var(--CTBBLUEL));
    background-color: var(--CTBBLUE);
}.ctbButton:active {
    position:relative;
    top:1px;
}
.ctbGreenBtn {
    box-shadow:inset 0px 1px 0px 0px #b5dddd;
    background:linear-gradient(to bottom, var(--CTBGREENM) 5%, var(--CTBGREEN));
    background-color: var(--CTBGREENM);
    border:1px solid #84c6c6;
    text-shadow:1px 1px 0px #194a4a;
}.ctbGreenBtn:hover {
    background:linear-gradient(to bottom, var(--CTBGREEN) 5%, var(--CTBGREENM));
    background-color: var(--CTBGREEN);
}
.ctbOrangeBtn {
    box-shadow:inset 0px 1px 0px 0px #fce2c1;
    background:linear-gradient(to bottom, var(--CTBORANGEL) 5%, var(--CTBORANGE));
    background-color: var(--CTBORANGEL);
    border:1px solid #eeb44f;
    text-shadow:1px 1px 0 #71582d, -1px 1px 0 #71582d, 1px -1px 0 #71582d, -1px -1px 0 #71582d;
}
.ctbOrangeBtn:hover {
    background:linear-gradient(to bottom, var(--CTBORANGE) 5%, var(--CTBORANGEL));
    background-color: var(--CTBORANGE);
}

Я рад оставить _functions.js там, где он есть, но почти все, что я читал, предлагает размещать такие вещи непосредственно перед </body> (что я и пробовал - стили все еще не загружаются). . Ставить его даже перед головой для меня вообще нет смысла. Почему оно так себя ведет?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
95
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема в опечатках в вашем коде - все они имеют префикс "CTB", а в css это "ctb" - селекторы css должны читаться так

function fnListButtons(elementId, jsonButts) {
          let aButts = JSON.parse(jsonButts);
          for (let aBtnVals of aButts) {
              let btn = document.createElement('button');
              btn.type = 'button';
              btn.value = aBtnVals[0];
              btn.innerHTML = aBtnVals[1];
              btn.classList.add('ctbButton', 'ctbSubmitBtn');
              btn.style.margin = '4px';
              switch (aBtnVals[2]) {
                  case 'orange':
                      btn.style.fontWeight = 'bold';
                      btn.classList.add('ctbOrangeBtn');
                      break;
                  case 'green':
                      btn.style.fontWeight = 'bold';
                      btn.classList.add('ctbGreenBtn');
                      break;
                  default:
                      btn.style.fontWeight = 'normal';
              }
              document.getElementById(elementId).appendChild(btn);
              btn.onclick = function () {
                  fnClickButton(this.value);
              }
          }
      }

ЗОЛОТАЯ ЗВЕЗДА!! Вот оно! Сначала я думал, что это все еще не работает. Затем я принудительно обновил кеш, и вуаля! Сценарий, работающий вне головы, — отвлекающий маневр. Я все еще озадачен тем, почему это вообще сработало, но мне уже все равно. Спасибо, что заглянули, и хорошего дня/ночи/выходных.

bookworm 12.02.2023 04:14

Другие вопросы по теме