标签：color 读写 JS 样式 window var matchMedia CSS 属性
五、用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{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像素} }
标签：color,读写,JS,样式,window,var,matchMedia,CSS,属性 来源： https://www.cnblogs.com/LH-721109/p/15849443.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。