#javascript #html #css #scrollbar #simplebar
Вопрос:
я пытаюсь включить simplebar в свой html, первый метод работает идеально,но второй вообще не работает, но почему? Я думаю, что это один и тот же код.
lt;script src="https://unpkg.com/simplebar@latest/dist/simplebar.js"gt;lt;/scriptgt; lt;link href="https://unpkg.com/simplebar@latest/dist/simplebar.min.css" rel="stylesheet" /gt; lt;div data-simplebar style="background-color: rgb(160, 158, 158); width: 400px; height: 150px;"gt; lt;h1gt;My First Headinglt;/h1gt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;/divgt; Как показано ниже, я использую javascript для добавления атрибутов и значений в исходный html-код, используя режим проверки Chrome, вы можете видеть, что второй метод не работает.
function myFunction() { document.getElementsByTagName("div")[0].setAttribute("data-simplebar", "init"); let a = document.createElement('link'), doc; a.setAttribute("rel", "stylesheet"); a.setAttribute("href", "https://unpkg.com/simplebar@latest/dist/simplebar.min.css"); doc = document.head; doc.appendChild(a); let b = document.createElement('script'), dod; b.setAttribute("src", "https://unpkg.com/simplebar@latest/dist/simplebar.js"); dod = document.body; dod.appendChild(b); } myFunction(); lt;div style="background-color: rgb(160, 158, 158); width: 400px; height: 150px;"gt; lt;h1gt;My First Headinglt;/h1gt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;/divgt; Ответ №1:
Код не совсем тот же самый.
Во втором примере вы устанавливаете элемент данных-simplebar для первого div со значением «инициализация».
Но в вашем первом фрагменте строка данных-simplebar пуста.
Этот фрагмент — ваш второй, в котором инициализация заменена на ничто в JS.
Теперь результат, похоже, совпадает с вашим первым фрагментом.
function myFunction() { document.getElementsByTagName("div")[0].setAttribute("data-simplebar", ""); let a = document.createElement('link'), doc; a.setAttribute("rel", "stylesheet"); a.setAttribute("href", "https://unpkg.com/simplebar@latest/dist/simplebar.min.css"); doc = document.head; doc.appendChild(a); let b = document.createElement('script'), dod; b.setAttribute("src", "https://unpkg.com/simplebar@latest/dist/simplebar.js"); dod = document.body; dod.appendChild(b); } myFunction(); lt;div style="background-color: rgb(160, 158, 158); width: 400px; height: 150px;"gt; lt;h1gt;My First Headinglt;/h1gt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;pgt;My first paragraph.lt;/pgt; lt;/divgt;