[英]am trying to incorporate javascript into my html, the first method works perfect,but the second dosent work at all, but why?
am trying to incorporate simplebar into my html, the first method works perfect,but the second dosent work at all, but why?我试图将 simplebar 合并到我的 html 中,第一种方法效果很好,但第二种方法根本不起作用,但为什么呢? I think they are the same code.
我认为它们是相同的代码。
<script src="https://unpkg.com/simplebar@latest/dist/simplebar.js"></script> <link href="https://unpkg.com/simplebar@latest/dist/simplebar.min.css" rel="stylesheet" /> <div data-simplebar style="background-color: rgb(160, 158, 158); width: 400px; height: 150px;"> <h1>My First Heading</h1> <p>My first paragraph.</p> <p>My first paragraph.</p> <p>My first paragraph.</p> <p>My first paragraph.</p> <p>My first paragraph.</p> <p>My first paragraph.</p> <p>My first paragraph.</p> <p>My first paragraph.</p> <p>My first paragraph.</p> <p>My first paragraph.</p> <p>My first paragraph.</p> </div>
As below, am using javascript to add attributes and values to the original html code, by using the Chrome inspect mode, u can see the second method doesnt work.如下,我使用 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();
<div style="background-color: rgb(160, 158, 158); width: 400px; height: 150px;"> <h1>My First Heading</h1> <p>My first paragraph.</p> <p>My first paragraph.</p> <p>My first paragraph.</p> <p>My first paragraph.</p> <p>My first paragraph.</p> <p>My first paragraph.</p> <p>My first paragraph.</p> <p>My first paragraph.</p> <p>My first paragraph.</p> <p>My first paragraph.</p> <p>My first paragraph.</p> </div>
The code is not exactly the same.代码并不完全相同。
In the second example you are setting data-simplebar on the first div to have value "init".在第二个示例中,您将第一个 div 上的 data-simplebar 设置为具有值“init”。
But in your first snippet the data-simplebar is empty.但是在您的第一个代码段中, data-simplebar 是空的。
This snippet is your second one with the init replaced with nothing in the JS.此代码段是您的第二个代码段,其中 init 替换为 JS 中的任何内容。
The result seems now to be the same as your first snippet.结果现在似乎与您的第一个片段相同。
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();
<div style="background-color: rgb(160, 158, 158); width: 400px; height: 150px;"> <h1>My First Heading</h1> <p>My first paragraph.</p> <p>My first paragraph.</p> <p>My first paragraph.</p> <p>My first paragraph.</p> <p>My first paragraph.</p> <p>My first paragraph.</p> <p>My first paragraph.</p> <p>My first paragraph.</p> <p>My first paragraph.</p> <p>My first paragraph.</p> <p>My first paragraph.</p> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.