JS读写CSS样式的方法汇总


Posted in Javascript onAugust 16, 2016

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
js生成随机数方法和实例
Jan 17 Javascript
JavaScript函数参数的传递方式详解
Mar 06 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
vue2中使用less简易教程
Mar 27 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 Javascript
如何基于JS截获动态代码
Dec 25 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
Vue Render函数原理及代码实例解析
Jul 30 Javascript
vue路由实现登录拦截
Mar 24 Vue.js
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
Aug 16 #Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 #Javascript
jQuery3.0中的buildFragment私有函数详解
Aug 16 #Javascript
js 自带的 map() 方法全面了解
Aug 16 #Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 #Javascript
js 自带的sort() 方法全面了解
Aug 16 #Javascript
JavaScript实战之菜单特效
Aug 16 #Javascript
You might like
海贼王:最美的悬赏令!
2020/03/02 日漫
php设计模式之观察者模式的应用详解
2013/05/21 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
PHP实现时间日期友好显示实现代码
2019/09/08 PHP
JavaScript 动态生成方法的例子
2009/07/22 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
2017/12/14 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
python面向对象实现名片管理系统文件版
2019/04/26 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
如何通过jdbc调用存储过程
2012/04/19 面试题
大学社团活动策划书
2014/01/26 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
上课看小说检讨书
2014/02/22 职场文书
公司投资建议书
2014/05/16 职场文书
微笑服务标语
2014/06/24 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
个人收入证明模板
2014/09/18 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
检讨书模板大全
2015/05/07 职场文书
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技