精华内容
下载资源
问答
  • 本文给大家总结了js动态设置css样式的常见方法,非常实用,对js设置css样式相关知识感兴趣的朋友一起学习吧
  • 给大家总结了JS设置CSS样式的几种方式,每种方式都非常不错,具有参考借鉴价值,需要的朋友参考下吧
  • JS设置CSS样式的几种方式

    千次阅读 2019-09-17 22:26:43
    JS设置CSS样式的几种方式 1、直接设置style的属性 某些情况下用这个设置!import值无效 如果属性有"-"号,就需要使用驼峰命名法(如textAlign),如果想保留"-"号,就使用中括号(如 element.style["text-align"]=...

    JS设置CSS样式的几种方式

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

    如果属性有"-"号,就需要使用驼峰命名法(如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');

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

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

    5、改变class(使用js增加或删除某个属性,如class属性,通过这种方法来改变样式)

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

    6、设置cssText

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

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

     

    展开全文
  • 前段时间看了React Native,但是感觉在安卓反面的开发并不成熟.有较多功能有待完善,而且自己在实际运用的过程中在...使用IDEA时,需要在settings里面的Language & Framework设置Javascript language version为JSX Harmo
  • JS设置CSS样式的几种方式(js设置!important) x619y 用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如...

    JS设置CSS样式的几种方式(js设置!important)

    x619y 

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

    4. 使用setProperty  如果要设置!important,推荐用这种方法设置第三个参数,属性名不用驼峰写法

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

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

    因JS获取不到css的伪元素,所以可以通过改变伪元素父级的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样式,常见的有以下几种

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

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

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

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

    因JS获取不到css的伪元素,所以可以通过改变伪元素父级的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);        
    展开全文
  • 主要介绍了小程序中使用css var变量,使js可以动态设置css样式属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • PAGE / NUMPAGES 用js动态改变css样式表 用setAttribute方法实现一个页面两份样式表的效果具体方法如下 第一步在连接样式表的元素里定义一个id,例如 <link href="1.css" rel="stylesheet" type="text/css" id="css> ...
  • JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用、效果、以及缺陷。 1、使用obj.className来修改样式表的类名。 2、使用obj.style.cssTest来修改嵌入式的css。 3、使用obj.className来修改样式表的...
  • 一、局部改变样式 有三种方法:直接改变样式、改变className和改变cssText 改变className: document.getElementById(‘obj’).className=”…” 改变cssText:document.getElementById(‘obj’).style.cssText=”...
  • 第二步:写一个js函数,代码如下: 代码如下:[removed] function change(a){ var css=document.getElementById(“css”); if (a==1) css.setAttribute(“href”,”1.css”); if (a==2) css.setAttr
  • 本文主要介绍了原生js更改css样式的两种方式,具有很好的参考价值,下面跟着小编一起来看下吧
  • 一般我们经常用js设置或获取的都是元素的内联(行内)样式! 例如: dom.style.width; //获取行内样式! dom.style.display = 'block'; //修改行内样式! 那么 如何设置 或 获取 外部样式、嵌入样式呢? ...

    一般我们经常用js去设置 或 获取的都是元素的内联(行内)样式!

    例如:

    dom.style.width;  //获取行内样式!
    
    dom.style.display = 'block'; //修改行内样式!

     

    那么 如何设置 或 获取 外部样式、嵌入样式呢?

     

    其是:在JS中有两种方法可以获取外部样式:

    • 通过 getComputedStyle() 方法获取

    • 通过 currentStyle() 方法获取( IE8 以下使用)

     

    JS代码如下:

    我已经进行了简单的封装,类似jQuery一样的可以设置 或 获取 元素的外部css样式!

                function Style(el) {
                    if (!el) {
                        console.error('请传入DOM元素!');
                        return false;
                    };
           
                    this.css = function () {
                        var arg = arguments;
                        var dom = document.querySelector(el);
    
                        if (1 < arg.length) {
                            //设置行内style样式
                            dom.style[arg[0]] = arg[1];
                        } else {
                            //获取非行内style样式
                            return dom.currentStyle ? dom.currentStyle[arg[0]] : getComputedStyle(dom, null)[arg[0]];
                        };
                    };
                };
    
                function $(el) {
                    return new Style(el);
                };
    
                //获取非行内style样式
                console.log($('body').css('color'));
                console.log($('#box').css('width'));
                console.log($('.btn').css('font-size'));
                
    
                //设置行内style样式
                $('span').css('font-size', '50px');
                $('span').css('color', 'green');
                $('.btn').css('background', 'red');

     

    展开全文
  • 下面小编就为大家带来一篇js中用cssText设置css样式的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 用原生js操作css样式方法总结

    千次阅读 2018-07-17 11:39:45
    为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限...一、可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档元素的CSS样式  如:var elm = document.getElementById('test');  ...

    为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了!

    一、可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档元素的CSS样式

                 如:var elm = document.getElementById('test');

                            elm.style.color = 'black';

     

    二、通过Element对象的getAttribute()、setAttribute()、removeAttribute()直接读写style属性

                 如:elm.setAttribute('style','color:red;line-height:30px');

     

    三、通过CSSStyleDeclaration对象的cssText属性和setProperty()、removeProperty等方法

        如:elm.style.cssText ='color:red;line-height:30px';

                      elm.style.removeProperty('color');

                         elm.style.setProperty('color', 'green', 'important');

                            elm.style.cssText = ''; //快速清空该规则的所有声明

            每一条CSS规则的样式声明部分(大括号内部的部分),都是一个CSSStyleDeclaration对象,它的属性和方法:

                属性:

                    1.cssText:当前规则的所有样式声明文本。该属性可读写,即可用来设置当前规则。

                    2.length:当前规则包含多少条声明。

                    3.parentRule:包含当前规则的那条规则,同CSSRule接口的parentRule属性。

                方法:

                    1.getPropertyPriority()方法返回指定声明的优先级,如果有的话,就是“important”,否则就是空字符串;

                    2.getPropertyValue方法返回指定声明的值;

                    3.item(index)方法返回指定位置的属性名,一般用[index]语法更直接;

                    4.removeProperty方法用于删除一条CSS属性,返回被删除的值;

                    5.setProperty方法用于设置指定的CSS属性,没有返回值;

     

    四、利用document.styleSheets属性,返回当前页面的所有StyleSheet对象(即所有样式表),它是一个只读的类数组对象,它的元素是CSSStyleSheet对象(继承自StyleSheet对象),该对象的属性方法如下:

            属性:

                    1.cssRules类数组对象,元素是样式表中CSS规则CSSStyleRule对象;IE9以下为rules;

                    2.disabled属性用于打开或关闭一张样式表,值为true或disabled;

                    3.ownerNode属性返回StyleSheet对象所在的DOM节点,通常是<link>或<style>。对于那些由其他样式表引用的样式表,该属性为null;

                    4.因为CSS的@import命令允许在样式表中加载其他样式表,就有了parentStyleSheet属性,它返回包括了当前样式表的那张样式表。如果当前样式表是顶层样式表,则该属性返回null;

                    5.type属性返回StyleSheet对象的type值,通常是text/css;

                    6.title属性返回StyleSheet对象的title值;

                    7.href属性是只读属性,返回StyleSheet对象连接的样式表地址。对于内嵌的style节点,该属性等于null;

                    8.media属性表示这个样式表是用于屏幕(screen),还是用于打印(print),或两者都适用(all),该属性只读,默认值是screen;

            方法:deleteRule()从样式表中删除一条规则,insertRule()向样式表中插入一条新规则,IE9以下为addRule()、removeRule();

               如: document.styleSheets[0].insertRule('#test:hover{color: white;}',0);

         document.styleSheets[0].deleteRule(0); //删除样式表中的第一条规则

         document.styleSheets[0].cssRules[1].selectorText; //返回选择器字符串

         document.styleSheets[0].cssRules[1].cssText; //返回规则字符串,含选择器

         document.styleSheets[0].cssRules[1].style.border;

         document.styleSheets[0].cssRules[1].style.cssText; //返回当前规则的所有样式声明字符串

     

    五、用window对象的getComputedStyle方法,第一个参数是Element对象,第二个参数可以是null、空字符串、伪元素字符串,该方法返回一个只读的表示计算样式的CSSStyleDeclaration对象,它代表了实际应用在指定元素上的最终样式信息,即各种CSS规则叠加后的结果;

            如:var color = window.getComputedStyle(elm, ':before').color;

                    var color = window.getComputedStyle(elm, ':before').getPropertyValue('color');

            或:var color = window.getComputedStyle(elm, null).color;

     

            表示计算样式的CSSStyleDeclaration对象与表示内联样式的CSSStyleDeclaration对象的区别:

                1.计算样式的属性是只读的;

                2.计算样式的值是绝对值,类似百分比和点之类相对的单位将全部转换为以'px'为后缀的字符串绝对值,其值是颜色的属性将以“rgb(#,#,#)”或“rgba(#,#,#,#)”的格式返回;

                3.不计算复合属性,只基于最基础的属性,如不要查询margin,而单独查询marginTop等;

                4.计算样式对象未定义cssText属性;

                5.计算样式同时具有欺骗性,使用时需注意,在查询某些属性时的返回值不一定精准,如查询font-family;

                6.IE9以下不支持getComputedStyle方法,IE的Element对象有currentStyle属性;

     

    六、直接添加样式表

            1.创建标签<style>添加一张内置样式表

                var style1 = document.createElement('style');

                style1.innerHTML = 'body{color:red}#top:hover{background-color: red;color: white;}';

                document.head.appendChild(style1);

            2.另一种是添加外部样式表,即在文档中添加一个link节点,然后将href属性指向外部样式表的URL

                var link1 = document.createElement('link');

                link1.setAttribute('rel', 'stylesheet');

                link1.setAttribute('type', 'text/css');

                link1.setAttribute('href', 'reset-min.css');

                document.head.appendChild(link1);

     

    七、window.matchMedia方法用来检查CSS的mediaQuery语句。各种浏览器的最新版本(包括IE 10+)都支持该方法,对于不支持该方法的老式浏览器,可以使用第三方函数库matchMedia.js

                下面是mediaQuery语句的一个例子:

                    @media all and (max-device-width: 700px) {

                          body {background: #FF0;}

                    }

            window.matchMedia方法接受一个mediaQuery语句的字符串作为参数,返回一个MediaQueryList对象。该对象有以下两个属性:

            media:返回所查询的mediaQuery语句字符串。

            matches:返回一个布尔值,表示当前环境是否匹配查询语句。

                    var result = window.matchMedia('(max-width: 700px)');
                    if (result.matches) {
                          console.log('页面宽度小于等于700px');
                    } else {
                          console.log('页面宽度大于700px');

                    }

            window.matchMedia方法返回的MediaQueryList对象有两个方法,用来监听事件:addListener方法和removeListener方法。如果mediaQuery查询结果发生变化,就调用指定的回调函数;

                    var mql =  window.matchMedia("(max-width: 700px)");
                    mql.addListener(mqCallback);// 指定回调函数
                    mql.removeListener(mqCallback);// 撤销回调函数

                    function mqCallback(mql) {

                          if (mql.matches) {// 宽度小于等于700像素} 

                          else { // 宽度大于700像素}

                    }

    本文参考:

    MDN: https://developer.mozilla.org/zh-CN/docs/Web/API

    阮一峰javascript参考:http://javascript.ruanyifeng.com/dom/css.html

    javascript权威指南第六版

    展开全文
  • http://www.cnblogs.com/LiuWeiLong/p/6058059.html
  • JS修改css样式style浅谈

    2020-12-03 00:53:22
    需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把“N”写成“n”,cssText也不能够把“T”写成“t”,否则无法实现效果。 调用方法: 如果改变className,则事先在样式表中申明类,但...
  • JS来动态设置CSS样式

    万次阅读 2018-08-23 15:31:43
    1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 element.style['text-align'] = '100px'; element.style....
  • JavaScript动态设置CSS样式实例分析通过使用文档对象模型DOM,可以将HTML文件当做文档对象,并按照文档对象处理方法进行处理。主要处理形式包括设置HTML标记文本内容、设置元素属性值及对Style样式进行操作等。本文...
  • setattribute批量设置css样式的实现代码。
  • js动态设置css样式和标签属性值

    千次阅读 2019-05-28 11:26:36
    使用jscss动态设置样式,有时候不起作用,或者在有的地方起作用,有的地方不起作用,没有找到原因,所以就在此记录下用到的方法 jquery的方法: attr()设置属性值 $(‘div’).attr(‘style’,‘width:60px;...
  • vue.js弹窗插件css样式

    2020-03-05 15:24:13
    vue.js Dialog插件,支持页面挂载对象和按钮配置,博客有js代码和示例,可以按需求自行修改,链接地址:https://blog.csdn.net/weixin_40885323/article/details/104675450
  • 实际开发中需要很多地方都需要用到上传头像的地方,这个文件是上传头像样式所需要的jscss文件。在上传头像窗口跳出时有动画效果
  • 修改css样式style在某些情况下还是比较实用的,可以动态改变一些样式,接下来为大家介绍下使用JavaScript是如何做到的

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 395,543
精华内容 158,217
关键字:

js设置css样式