精华内容
下载资源
问答
  • 原生js操作css样式方法总结

    千次阅读 2018-07-17 11:39:45
    为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了! 一、可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档...

    为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生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权威指南第六版

    展开全文
  • 原生js操作dom css

    2020-03-05 23:19:48
    console.log(color1.style.backgroundColor) 懂得自然懂
    console.log(color1.style.backgroundColor)

    懂得自然懂

    展开全文
  • 仿华为官网,使用纯原生JSCss编写网站,不使用JQuery等开源包
  • 本文主要介绍了原生js更改css样式的两种方式,具有很好的参考价值,下面跟着小编一起来看下吧
  • 原生Javascript 操作 css类名 不建议用 .class ; 建议用#id类名 效果图示下: 案例 · 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>...


    原生Javascript 操作 css类名

    • 不建议.class
    • 建议#id类名

    效果图示下:

    在这里插入图片描述

    案例 · 代码如下:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>javascript操作类名.html</title>
    		<style type="text/css">
    			.hide{display: none;}
    			.show{display: block;}
    		</style>
    	</head>
    	<body>
    		<div class="xs show" id="xs">我是现实的,来不来。</div>
    		<div class=" hide" id="yc">我是幕后黑手,走不走。</div>
    		<script type="text/javascript">
    			document.getElementById('xs').style.display = 'none';
    			document.getElementById('yc').style.display = 'block';
    		</script>
    	</body>
    </html>
    

    重要代码提示:

    // 请尽量使用id,用于js操作抓取
    document.getElementById("xs").style.display="none";
    

    其他无关参考:

    • document.getElementById(nm").classList.add('class', 'name1');

    • document.getElementById(nm").classList.remove('class');

    • document.getElementById(nm").setAttribute()······';

    • document.getElementById(nm").removeAttribute()······';


    官方参考:


    以上就是关于“ 原生Javascript 操作 css类名 - 踩坑篇 ” 的全部内容。

    展开全文
  • JavaScript操作CSS类名className——hasClass,addClass,removeClass验证当前元素是否包含className这个类名function hasClass(curEle, className) { var reg = new RegExp("(^| +)" + className + "( +|$)"); ...

    原生JavaScript操作CSS类名className——hasClass,addClass,removeClass

    验证当前元素是否包含className这个类名

    function hasClass(curEle, className) {
      var reg = new RegExp("(^| +)" + className + "( +|$)");
      return reg.test(curEle.className);
    }

    给元素添加样式类名

    function addClass(curEle, className) {
      var arr = className.replace(/(^ +| +$)/g, "").split(/ +/g); // 先去首尾空格,为了防止className为多个类名 "box1 box2"
      for (var i = 0,len=className.length; i < len; i++) {
        var curName = arr[i];
        if (!hasClass(curEle, className)) {
          curEle.className += " " + curName;
        }
      }
    }

    移除类名

    function removeClass(curEle, className) {
      var arr = className.replace(/(^ +| +$)/g, "").split(/ +/g);
      for (var i = 0, len = className.length; i < len; i++) {
        var curName = arr[i];
        if (hasClass(curEle, curName)) {
          var reg = new RegExp("(^| +)" + curName + "( +|$)", "g");
          curEle.className = curEle.className.replace(reg, " ");
        }
      }
    }
    展开全文
  • 主要为大家详细介绍了原生javascriptcss实现图片轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • NULL 博文链接:https://kent-mu.iteye.com/blog/2393151
  • 主要介绍了原生js+css调节音量滑块,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 原生JS修改CSS属性

    万次阅读 2019-08-06 18:15:23
    原生JS修改CSS属性有以下三种方法 修改style样式 通过document.styleSheets[n] // n表示期望修改的样式表序号,从0开始计数来获取到期望修改的样式表,通过cssRules[0]获取到该样式表的css内容,通过style修改特定...
  • 本文实例为大家分享了原生css+js实现tab切换功能的具体代码,供大家参考,具体内容如下 现在很多的ui框架都集成了tab功能,使用过程中只需按照他们的api套用即可,但在有时jquery项目中会觉得为了一个tab功能再单独...
  • 主要为大家详细介绍了css3 transform及原生js实现鼠标拖动3D立方体旋转的相关资料,感兴趣的小伙伴们可以参考一下
  • 主要介绍了原生javascript+css3编写的3D魔方动画旋扭特效的相关资料,需要的朋友可以参考下
  • 原生js获取css属性值

    2019-11-03 23:49:38
    获取css属性值的方法 1.obj.style: 使用方法:obj.style.left 这个方法js只能获取在html标签中的写在style属性中的值(style="…")即行内样式,而无法获取定义在样式表里面的属性。 2.window....
  • 原生javascript实现css属性的set和get
  • 本文实例讲述了原生JS检测CSS3动画是否结束的方法。分享给大家供大家参考,具体如下: 不知道大家在做网页的时候有没有碰到这种情况:当你使用CSS3的动画属性时,想要在动画结束后添加一系列操作,但往往这些操作...
  • 原生js基于css3圆形时钟特效是一款圆形样式指针时钟代码。
  • 前端实现点击图片预览放大
  • 原生JavaScriptCSS3共同实现bootstrap模态框效果。
  • js原生获取css属性

    2020-07-21 14:16:43
    background-color:#333,不能通过 element.style.background 来获取(见上面例子) 2)css属性使用驼峰法,如 backgroundColor、marginTop等。 2.写在css中的属性,非内联样式(chrome) var oBox = document....
  • 原生JavaScript+CSS制作抖动古装美女相册图片放大展示
  • 参考: https://www.cnblogs.com/majingyi/p/6840818.html ...var head= document.getElementById("head"); head.style.width = "200px"; head.style.height = "70px...
  • 本文实例讲述了原生JS实现获取及修改CSS样式的方法。分享给大家供大家参考,具体如下: 大家都知道在JavaScript原生操作中获取元素的样式,在实际操作是使用时比较频繁的一件事,这里像大家介绍下获取css样式的方法...
  • 使用原生JS实现jQuery的css选择器,考虑以下几个问题: 1.jQuery用$符号传参的形式获取节点的对象:1)传参有可能是字符串;2)有可能是一个节点对象;3)有可能直接是一个函数,就是$(function(){}),这个形式。所以...
  • 今天小编把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面。怎么个炫酷法呢,看看下面的图片大家就知道啦。 效果图: 不过在看代码之前呢,大家先和小颖看看css中的opacity、...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 91,873
精华内容 36,749
关键字:

原生js操作css