js和jquery设置css的几种方式

摘要：js设置样式的方法：直接设置style的属性某些情况用这个设置 !important值无效、直接设置属性（只能用于某些属性，相关样式会自动识别）；使用setProperty 如果要设置!important，推荐用这种方法设置第三个参数

一、js设置样式的方法

//1. 直接设置style的属性  某些情况用这个设置 !important值无效
  element.style.height = '50px';

//2. 直接设置属性（只能用于某些属性，相关样式会自动识别）

  element.setAttribute('height',50);

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

//3. 设置style的属性
  element.setAttribute('style', 'height: 100px !important');

//4. 使用setProperty  如果要设置!important，推荐用这种方法设置第三个参数
  element.style.setProperty('height', '300px', 'important');

//5. 通过改变伪元素父级的class来动态更改伪元素的样式
  element.className = 'blue';
  element.className += 'blue fb';

//6. 设置cssText
  element.style.cssText = 'height: 100px !important';
  element.style.cssText += 'height: 100px !important'；

二、jquery设置样式的几种方法

//1、设置所有匹配元素的指定 CSS 属性 不支持属性名称简写（如border和background）
  $(selector).css(name,value)

//2、使用函数来设置 CSS 属性
  $(selector).css(name,function(index,value))


  $("button").click(function(){
　 　 $("p").css("color",function(){return "red";}); 
  });
 

//name：必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性，比如 "color"；
//function(index,value)：规定返回 CSS 属性新值的函数。index - 可选。接受选择器的 index 位置；value - 可选。接/受 CSS 属性的当前值

//3、根据CSS标签名称 设置多个 CSS 属性/值对
  
  $(selector).css({property:value, property:value, ...})

  $("p").css({"color":"white","background-color":"#98bf21", "font-family":"Arial", "font-size":"20px","padding":"5px"});

//4、根据ID标签名称 设置多个 CSS 属性/值对
  $('#myhead').css('position','fixed');
  $('#myhead').css({property:value, property:value, ...})

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_7095