为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生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像素}
}
- 原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- 【javascript】原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- 【JS新手教程】JS修改css样式的几种方法
本文试验了几种JS修改css样式的方法,方法1:元素.style.样式=样式值.方法2:元素.style.cssText=样式:样式值方法3:元素.style[样式]=样式值 .cssText这种,可 ...
- js获取css样式方法
一.CSS样式共有三种:内联样式(行间样式).内部样式.外部样式(链接式和导入式) <div id="a" style="width: 100px;height: ...
- 原生JS获取HTML样式并修改
大家都知道在JavaScript原生操作中获取元素的样式,在实际操作是使用时比较频繁的一件事,这里像大家介绍下获取css样式的方法,希望可以帮助一些需要的人,如果有幸被大牛看到,有更好的办法,欢迎提出 ...
- 11-13 js操作css样式
1.Js操作css样式 Div.style.width=”100px”.在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性,跟实际项目是不符. ...
- js中css样式
1.js操作css样式 例如 div . style . width=“100px”. 就是在div标签内我们添加一个style属性,并设定了width值,这种写法会给标签带来大量的style属性,跟 ...
- js改变css样式
CreateTime--2017年10月31日15:14:12 Author:Marydon js改变css样式 1.js改变单个css样式 HTML部分 <div id="tes ...
- js操作css样式、js的兼容问题
一.js操作css样式 div . style . width="200px" 在div标签内我们添加了一个style属性,并设定width值.这种写法会给标签带来大量的style ...
随机推荐
- Windows Phone 8.1上的开发人员请看
1)SDK选择:如果你是在Windows Phone 8.1上做一个新App, 或者想把7.x/8.0的App移植到8.1上,请使用WinRT SDK,而不是Silverlight.当然Silverl ...
- JS、LUA都可以开发移动应用
蓝色互动,大众点评.韩都衣舍.汉庭.携程旅游.华夏基金.中国农业银行等好多知名APP开发商,正在使用, 领先的快速移动应用开发平台 http://www.deviceone.net?00001 应用开 ...
- java提高篇(五)-----抽象类与接口
接口和内部类为我们提供了一种将接口与实现分离的更加结构化的方法. 抽象类与接口是java语言中对抽象概念进行定义的两种机制,正是由于他们的存在才赋予java强大的面向对象的能力.他们两者之间对抽象概念 ...
- [安卓] 16、ListView和GridView结合显示单元实现自定义列表显示效果
List在各种手机应用中都有体现,是安卓UI设计的必修课. 本文将介绍在开发中如何利用ListView和GridView设计自定义列表. 下面分别是用ListView和GridView做的效果: 上面 ...
- 利用html 5 websocket做个山寨版web聊天室(手写C#服务器)
在之前的博客中提到过看到html5 的websocket后很感兴趣,终于可以摆脱长轮询(websocket之前的实现方式可以看看Developer Works上的一篇文章,有简单提到,同时也说了web ...
- Qt类继承图
对于学习Qt的,有一个Qt所有类的继承图表,是很有需要的.以下提供了Qt5.1的所有类的继承关系图.看的时候,可以放大和缩小.如需文档下载,可以加入最后的QQ学习群.
- C struct结构体内存对齐问题
在空间看到别人的疑问引起了我的兴趣,刚好是我感兴趣的话题,就写一下.为了别人的疑问,也发表在qq空间里.因为下班比较晚,10点才到家,发表的也晚.其实是个简单的问题. 直接用实例和内存图说明: #i ...
- IOS 多线程04-GCD详解 底层并发 API
注:本人是翻译过来,并且加上本人的一点见解. 前言 想要揭示出表面之下深层次的一些可利用的方面.这些底层的 API 提供了大量的灵活性,随之而来的是大量的复杂度和更多的责任.在我们的文章常见的后台实践 ...
- css 常见时间轴的做法(————————————————时间轴——————————————————)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Visual Studio 2015 Bowser Link的功能不停的向服务端发送请求
Visual Studio 2015新建的mvc项目 默认在每个视图上生成一些JavaScript脚本