使用js写CSS

厚渡

已于 2022-07-16 21:02:12 修改

阅读量1.1k

点赞数 2

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

本文链接：https://blog.csdn.net/dwp_wz/article/details/125819506

版权

javaScript 同时被 2 个专栏收录

21 篇文章 2 订阅

订阅专栏

css3

9 篇文章 1 订阅

订阅专栏

使用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);