使用javascript动态修改CSS/style_修改css style.height-优快云博客

本文链接：https://blog.youkuaiyun.com/hhlg79/article/details/107485293

本文介绍了使用JavaScript动态修改CSS的几种方法，包括直接设置属性、修改class、使用cssText属性、操作style元素以及添加<link>链接样式表。同时，还提供了查看所有Style rule的技巧，并给出详细的代码示例。

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

设置style的属性:

element.style.height = '100px';

直接设置属性:

element.setAttribute('height', 100);
element.setAttribute('height', '100px');

修改class:

element.setAttribute("class", "blue");
element.className = 'blue';
element.className += 'blue fb';

设置cssText:

element.style.cssText = 'height: 100px !important';
element.style.cssText += 'height: 100px !important';

创建/修改style元素:

var elemsty = document.createElement('style');
//注意！！！立即执行appendChild操作，否则可能会出错
document.head.appendChild(elemsty);
var sheet = elemsty.sheet;
//sheet = document.styleSheets[0];
sheet.addRule('.box', 'height: 100px');
sheet.insertRule('.box {height: 100px}', 0);
//sheet.deleteRule(n);

添加<link>链接样式表

function AddStyleLink(url)
{
  var v = document.createElement("LINK");
  v.type = type="text/css";
  v.href = url;
  v.rel = "stylesheet";
  //log(v.outerHTML);
  document.head.appendChild(v);
}
AddStyleLink("https://www.runoob.com/try/demo_source/styles.css");

打印所有Style rule:

function PrintAllStyleRule()
{
    var i,j;
    var sheet, arr = document.getElementsByTagName('STYLE');
    arr = document.styleSheets;
    //log("[Msg] " + arr.length);
    try{
    for(i = 0; i < arr.length; i++)
    {
    sheet = arr[i];
    var rule, rules = sheet.cssRules;
    for(j = 0; j < rules.length; j++)
    {
    rule = rules[j];
    if(undefined != rule.selectorText)
        log(rule.selectorText);
    try{log("{"+rule.style.cssText+"}");}
    catch(e)
    {
        var k, lrules = rule.cssRules;
        for(k = 0; k < lrules.length; k++)
        {
            rule = lrules[k];
            log(rule.selectorText);
            log("{"+rule.style.cssText+"}");
        }
    }
    }
    log("================");
    }
    }catch(e){log("[Err] " + e);}
}

代码示例:

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);
  }
  styleElement.appendChild(document.createTextNode(newStyle));
}
addNewStyle('.box {height: 100px !important;}');