使用js写CSS

原创已于 2022-07-16 21:02:12 修改 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #css3

于 2022-07-16 14:22:22 首次发布

javaScript 同时被 2 个专栏收录

21 篇文章

订阅专栏

css3

9 篇文章

订阅专栏

这篇博客介绍了如何在JavaScript中动态引入外部样式表以及直接编写CSS代码并将其添加到文档中。通过创建`<link>`元素加载远程CSS文件，然后利用`<style>`元素结合模板字符串动态插入CSS规则，实现页面样式的实时修改。这对于油猴插件开发或其他需要动态调整页面样式的场景非常实用。

使用js来些CSS
常见于油猴插件开发

第一种引入第三方样式

    // 引入样式
    let link = document.createElement("link");
    link.setAttribute("rel", "stylesheet");
    link.setAttribute("href", "http://www.houdu.online/zuoye/teacher/1172824156/houdu-browser/css/houduGo.css");
    document.head.appendChild(link);

使用CSS

 let css = `
    div {
      width:100px;
      height:100px;
      background: pink;
    }
        .web-toast-kkli9{
				    position: fixed;
				    background: rgba(0, 0, 0, 0.7);
				    color: #fff;
				    font-size: 14px;
				    line-height: 1;
				    padding:10px;
				    border-radius: 3px;
				    left: 50%;
				    transform: translateX(-50%);
				    -webkit-transform: translateX(-50%);
				    -moz-transform: translateX(-50%);
				    -o-transform: translateX(-50%);
				    -ms-transform: translateX(-50%);
				    z-index: 999999999999999999999999999;
				    white-space: nowrap;
				}
				.fadeOut{
				    animation: fadeOut .5s;
				}
				.fadeIn{
				    animation:fadeIn .5s;
				}
`;
    var myStyle = document.createElement('style');
    // 三选一
    // myStyle.textContent = css; // 不会会有br
    // myStyle.innerText = css; // 会有br
    myStyle.innerHTML = css; // 不会会有br
    var doc = document.head || document.documentElement;
    doc.appendChild(myStyle);