原生js插入样式文件

function insert() {
    console.log("insert");
    if (document.getElementById("temp-id")) return;
    const sty = document.createElement("style");
    sty.innerHTML = `
    * {
        animation-duration: 0s !important;
    }
  `;
    sty.id = "temp-id";
    document.head.appendChild(sty);
}

function remove() {
    try {
        document.head.removeChild(document.getElementById("temp-id"));
    } catch (e) {
    }
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在原生 JavaScript 中实现组件化开发可以通过以下几个步骤: 1. 将组件的 HTML、CSS 和 JavaScript 代码分离出来,分别保存在不同的文件中。 2. 创建一个 JavaScript 类来表示组件,并在类中定义组件的状态和行为。 3. 在类的构造函数中,将组件的 HTML、CSS 和 JavaScript 代码加载进来,使用 DOM API 将 HTML 插入到页面中,并为组件的 DOM 元素添加事件监听器。 4. 在组件类中提供一些公共方法,使得其它 JavaScript 代码可以与组件进行交互。 例如,下面是一个简单的原生 JavaScript 组件的示例代码: ``` // 组件类 class MyComponent { constructor() { // 加载 HTML、CSS 和 JavaScript 代码 const html = '<div class="my-component">Hello, world!</div>'; const css = '.my-component { color: red; }'; const js = ''; // 创建 DOM 元素并插入到页面中 const container = document.createElement('div'); container.innerHTML = html; document.body.appendChild(container); // 添加 CSS 样式 const style = document.createElement('style'); style.textContent = css; document.head.appendChild(style); // 添加 JavaScript 代码 const script = document.createElement('script'); script.textContent = js; document.body.appendChild(script); // 添加事件监听器 container.addEventListener('click', this.handleClick.bind(this)); } handleClick() { console.log('MyComponent was clicked!'); } // 公共方法 doSomething() { console.log('MyComponent is doing something!'); } } // 实例化组件 const myComponent = new MyComponent(); // 调用公共方法 myComponent.doSomething(); ``` 在上面的示例代码中,我们创建了一个名为 `MyComponent` 的组件类,并在构造函数中加载了 HTML、CSS 和 JavaScript 代码。我们使用 DOM API 将 HTML 插入到页面中,并为组件的 DOM 元素添加了一个点击事件监听器。我们还定义了一个名为 `doSomething` 的公共方法,外部 JavaScript 代码可以使用这个方法与组件进行交互。 要使用组件,只需要实例化组件类即可,如下所示: ``` const myComponent = new MyComponent(); myComponent.doSomething(); ``` 当然,这只是一个简单的示例,实际应用中需要考虑更多的细节和技巧。例如,如何处理组件的状态、如何优化组件的性能等等。但是,以上的步骤可以作为一个基本的组件化开发的指导。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值