原生js修改外部css文件的两种方法

awehhh

于 2022-07-09 10:51:58 发布

阅读量662

点赞数

分类专栏： css 文章标签： css 前端 js

本文链接：https://blog.youkuaiyun.com/weixin_42684136/article/details/125690665

版权

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用JavaScript直接修改外部CSS文件中的样式规则。通过`document.styleSheets`访问CSS规则并进行修改，或者创建新的`<style>`元素动态插入CSS。示例代码展示了针对`.conip`选择器设置宽度和高度的方法，以及如何清空已有样式并添加新样式到文档流中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生js修改外部css文件的两种方法

document.styleSheets[0].rules

	let styles = document.styleSheets
    console.log(styles) //数组 返回两个CSSStyleSheet
    let rules = styles[1].rules ? styles[1].rules : styles[0].cssRules
    for (let i = 0; i < rules.length; i++) {
        let cssquery = rules[i].selectorText;
        switch (cssquery) {
            case ".conip":
                rules[i].style.width = itemWidth + "px";
                rules[i].style.height = (itemWidth + 12) + "px";
                break;
        }
    }

document.createElement(‘style’)

  function addNewStyle(newStyle) {
      //获取样式文件
      var styleElement = document.getElementById('styles_js')
      if (!styleElement) {
        //新增样式文件
        styleElement = document.createElement('style')
        styleElement.type = 'text/css'
        styleElement.id = 'styles_js'
        document.getElementsByTagName('head')[0].appendChild(styleElement)
      } else {
        // 清空之前缓存样式
        styleElement.innerHTML = ''
      }
      //插入文档流
      styleElement.appendChild(document.createTextNode(newStyle))
    }
  	
  	//调用
   	let styleStr = '.conip {width : 20px;}'
      addNewStyle(styleStr)