JS设置CSS样式的方式汇总

1. 直接设置style的属性  某些情况用这个设置 !important值无效

如果属性有'-‘号，就写成驼峰的形式（如textAlign）  如果想保留 - 号，就中括号的形式  element.style[‘text-align'] = ‘100px';

element.style.height = '100px';

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

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

3. 设置style的属性

element.setAttribute('style', 'height: 100px !important');

!important的css定义是拥有最高的优先级。

4. 使用setProperty  如果要设置!important，推荐用这种方法设置第三个参数

element.style.setProperty('height', '300px', 'important');

5. 改变class   比如JQ的更改class相关方法

element.className = 'blue';
element.className += 'blue fb';

6. 设置cssText

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

7. 创建引入新的css样式文件

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;}');

8. 使用addRule、insertRule

// 在原有样式操作
    document.styleSheets[0].addRule('.box', 'height: 100px');
    document.styleSheets[0].insertRule('.box {height: 100px}', 0);
    // 或者插入新样式时操作
    var styleEl = document.createElement('style'),
      styleSheet = styleEl.sheet;
    styleSheet.addRule('.box', 'height: 100px');
    styleSheet.insertRule('.box {height: 100px}', 0);
    document.head.appendChild(styleEl);

以上所述是小编给大家介绍的JS设置CSS样式的方式汇总，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JS获取CSS样式（style/getComputedStyle/currentStyle）

    CSS的样式分为三类: 内嵌样式:是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式:是写在HTML的里面的,内部样式只对所在的网页有效. 外部样式表:如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这 些样式(Styles)的网页里引用这个CSS文件. getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式对象([object CSSStyleDeclar

  • JavaScript实现动态创建CSS样式规则方案

    现在Web应用中有大量的JavaScript代码,而我们也一直在追寻各种使他们更快的解决方案. 1.我们通过 事件代理(event delegation) 让事件监听更高效, 2.我们利用 函数降频技术(function debouncing)来限制一段时间内给定方法被调用的次数,请参考:如何防止事件函数的高频触发(中文翻译) 3.我们使用 JavaScript加载器 来加载我们确实需要的那部分资源,等等. 还有一种方式,可以让我们的页面更加的快速和高效.那就是直接通过JS动态地添加和删除样式表

  • JS判断移动端访问设备并加载对应CSS样式

    JS判断不同web访问环境,主要针对移动设备,提供相对应的解析方案(判断设备代码直接copy腾讯网的) 复制代码 代码如下: // 判断是否为移动端运行环境 if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-

  • Javascript改变CSS样式(局部和全局)

    一.局部改变样式 有三种方法:直接改变样式.改变className和改变cssText 改变className: document.getElementById('obj').className="-" 改变cssText:document.getElementById('obj').style.cssText="width:20px; border:solid 1px #f00;"; 改变直接样式: document.getElementById('obj').s

  • jsp页面中插入css样式的三种方法总结

    1. 外部样式 当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用<link>标签链接到样式表.<link>标签在(文档的)头部: <head><link rel="stylesheet"  type="text/css"  href="path/myCss.css"/></head> 2.内部样式 当

  • javascript 动态修改css样式方法汇总(四种方法)

    在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的类名. 2.使用obj.style.cssTest来修改嵌入式的css. 3.使用obj.className来修改样式表的类名. 4.使用更改外联的css文件,从而改变元素的css 下面是一段html代码和css代码用来解释上面方法的区别的. CSS .style1{margin:10px auto ;b

  • JavaScript动态添加css样式和script标签

    [动态添加css样式] <html> <head> <script type="text/javascript"> window.onload=function(){ var head=document.getElementsByTagName('head')[0]; //获取到head元素 var link=document.createElement('link'); //创建link元素节点,也就是link标签 link.rel="s

  • JS设置CSS样式的方式汇总

    1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保留 - 号,就中括号的形式  element.style['text-align'] = '100px'; element.style.height = '100px'; 2. 直接设置属性(只能用于某些属性,相关样式会自动识别) element.setAttribute('height', 100); element.setAttribute

  • JS读写CSS样式的方法汇总

    为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了! 一.可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档元素的CSS样式 如:var elm = document.getElementById('test');       elm.style.color = 'black'; 二.通过Element对象的getAttribute().setAttribute().remo

  • 原生js更改css样式的两种方式

    原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  "的方式直接更改CSS样式. 2. 先在CSS样式表中对特定的类如"active类"设置样式(这里的active类是假定的,暂时不存在),然后再在javascript代码中通过node.classname="active"使得CSS样式表中对active类的样式设

  • 用JS动态设置CSS样式常见方法小结(推荐)

    用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 element.style['text-align'] = '100px'; element.style.height = '100px'; 2. 直接设置属性(只能用于某些属性,相关样式会自动识别) element.setAttribute('height', 100);

  • js中用cssText设置css样式的简单方法

    如果网页中一个 id为"no"的标签,暂且当div标签来tell: 想要在js中设置这个div的css样式,很一般的做法是: var obj = document.getElementByIdx_x_x('no'); obj.style.width = '400px'; obj.style.height = '300px'; 如果要设置一堆又一堆的css样式呢,太麻烦了把. 一般情况下都会结合css来添加className或者改变className达到想要的效果,但是如果你create

  • jQuery实现获取及设置CSS样式操作详解

    jQuery实现获取及设置CSS样式操作详解

    本文实例讲述了jQuery实现获取及设置CSS样式操作.分享给大家供大家参考,具体如下: addClass():向被选元素添加一个或多个类 removeClass():从被选元素删除一个或多个类 toggleClass():对被选元素进行添加/删除类的切换操作 css():设置或返回被选元素的一个或多个样式属性 样式表实例: .important{ font-weight:bold; font-size:xx-large; } .blue{ color:blue; } addClass() <!

  • jquery设置css样式的多种方法(总结)

    设置css样式的多种方法总结,jquery <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> </style> </head> <body> <ul> <li>兄弟多个1</li&

  • vue中使用定义好的变量设置css样式详解

    vue中使用定义好的变量设置css样式详解

    目录 前言 实现 第一种情况 第二种情况 语法 方法一 方法二 总结 前言 在做项目的时候,通常会遇到需要在 HTML 标签上绑定变量来设置样式,对于这种需求,共有两种情况. 实现 第一种情况 如果是对于代码中实实在在存在的 HTML 标签,我们可以直接绑定变量来设置样式,比如改变表格的边框. 先设置一个表格边框样式的 JS 变量(table_border). 再在 HTML 标签的 style 属性上绑定该 JS 变量. <template> <div class="app-

  • js改变css样式的三种方法推荐

    共用代码: <div id="div"> this is a div </div> var div=document.getElementById('div'); 第一种:用cssText div.style.cssText='width:250px;height:250px;border:1px red solid;'; 第二种:用setProperty() div.style.setProperty('width','250px'); div.style.s

随机推荐