CSS 操作

通过 JavaScript 操作 CSS

  • HTML 元素的 style 属性

      1. <div style="background-color:red; border:1px solid black;" />
    • 使用 .getAttribute() 方法、.setAttribute() 方法和 .removeAttribute() 方法,直接读写或删除网页元素的 style 属性

        1. div.setAttribute("style'",
        2. "background-color:red; border:1px solid black;"
        3. );
  • style 属性的值是一个 CSSStyleDeclaration 实例,用来操作元素的样式,不过,连词号需要变成骆驼拼写法

    • 操作属性时的规则

      • 将横杠从 CSS 属性名中去除,然后将横杠后的第一个字母大写
      • 对象的属性值都是字符串,设置时必须包括单位
      • 如果 CSS 属性名是 JavaScript 保留字,则规则名之前需要加上字符串 css
          1. ele.style.backgroundColor // 对应css 属性 background-color
          2.  
          3. ele.style.cssFloat // 对应 css 属性 float
      • 注意:
        • Element.style返回的只是行内样式,并不是该元素的全部样式。
        • 元素的全部样式要通过 window.getComputedStyle(obj, null)["attr"] 得到。(IE8 下使用ele.currentStyle["attr"])
    • ele.style.实例属性

        • ele.style.cssText

          • 读写元素的所有行内样式,以字符串形式返回
          • 不用改写 CSS 属性名
          • 清空元素的行内样式,最简便的方法就是设置 cssText 为空字符串
            • <div id="ele" style="background:yellow"></div>

              ele.style.cssText;    // 返回字符串 "background:yellow"

              ele.style.cssText = "";    // 清空行内样式

        • ele.style.length

            • 返回一个整数值,表示元素行内样式包含多少条样式声明
        • ele.style.parentRule

            • 返回当前规则所属的那个样式块(CSSRule 实例)。如果不存在所属的样式块,该属性返回 null
            • 属性只读,且只在使用 CSSRule 接口时有意义
    • ele.style.实例方法

        • ele.style.getPropertyPriority()

            • 判断元素的某个属性是否加了 important 优先级
            • 以某个属性名作为参数,返回一个字符串
              • 如果该属性设置了 important,则返回 "important"
              • 否则返回空字符串 ""
        • ele.style.getPropertyValue()

            • 返回元素某属性的属性值
            • 以某属性名为参数,返回一个字符串
        • ele.style.item()

            • 接受一个整数值作为参数,返回该索引位置的 CSS 属性名
        • ele.style.removeProperty()

            • 删除行内式某属性,返回被删除属性的旧属性值
        • ele.style.setProperty(属性名,属性值,优先级)

          • 设置新的 CSS 属性。没有返回值
          • 优先级可选,唯一合法值:improtant
  • CSS 模块的侦测

判断当前浏览器是否支持某个模块

    • element.style.attrName 的返回值

      • 如果该 CSS 属性确实存在

        • 会返回一个字符串
        • 即使该属性实际上并未设置,也会返回一个空字符串
      • 如果该属性不存在,则会返回  undefined
      • 侦测方法1
          1. typeof element.style.attrName === 'string';
          2.  
          3. // 注意,不管 CSS 属性名的写法带不带连词线,style 属性上都能反映出该属性是否存在
            ele.style['backgroundColor'] // "" === "string" 返回 true
            document.body.style['background-color'] // "" === "string" 返回 true
          4. // 使用的时候,需要把不同浏览器的 CSS 前缀也考虑进去
            ele.style['-webkit-animation'] === 'string'
        • 封装该侦测方法
            1. function isPropertySupported(cssPropStr) {
            2. if (cssPropStr in document.body.style){
            3. return true;
            4. }
            5. var prefixes = ['Moz', 'Webkit', 'O', 'ms', 'Khtml'];
            6. var prefProperty = cssPropStr.charAt(0).toUpperCase() + cssPropStr.substr(1);
            7.  
            8. for(var i = 0; i < prefixes.length; i++){
            9. if((prefixes[i] + prefProperty) in document.body.style){
            10. return true;
            11. }
            12. }
            13.  
            14. return false;
            15. }
            16.  
            17. isPropertySupported('background-clip'); // true
  • 浏览器原生提供 CSS 对象,目前有两个静态方法

    • CSS.escape() 

      • 转义 CSS 选择器里面的特殊字符

        1. document.querySelector('#' + CSS.escape('foo#bar'));
        2.  
        3. // #号,该字符在 CSS 选择器里面有特殊含义
        4. // 不能直接写成 document.querySelector('#foo#bar')
        5. // 只能写成 document.querySelector('#foo\\#bar') // 这里必须使用双斜杠的原因是,单引号字符串本身会转义一次斜杠
    • CSS.supports()

      • 判断当前环境是否支持某一句 CSS 样式
      • 参数有两种写法
        • 第一个参数是属性名,第二个参数是属性值

            1. // 第一种写法
            2. CSS.supports('transform-origin', '5px'); // true
        • 整个参数就是一行完整的 CSS 语句
            1. // 第二种写法
            2. CSS.supports('display: table-cell'); // true
          • 注意,第二种写法的参数结尾不能带有分号
  • 高级浏览器 window.getComputedStyle()

    • 获取元素的实际样式,浏览器计算后得到的最终样式信息
    • 注意:
      • CSSStyleDeclaration 实例返回的 CSS 值都是绝对单位。

        • 比如,长度都是像素单位(返回值包括px后缀),颜色是rgb(#, #, #)或rgba(#, #, #, #)格式。
      • CSS 规则的简写形式无效。
        • 比如,想读取 margin 属性的值,不能直接读,只能读 marginLeft、marginTop 等属性;
        • 再比如,font 属性也是不能直接读的,只能读 font-size 等单个属性。
      • 如果读取 CSS 原始的属性名,要用方括号运算符,比如 ele.style['z-index'];
      • 如果读取骆驼拼写法的 CSS 属性名,可以直接读取 ele.style.zIndex。
      • 该方法返回的 CSSStyleDeclaration 实例的 cssText 属性无效,返回 undefined
    • 它接受一个节点对象作为参数,返回一个 CSSStyleDeclaration 实例(动态对象,只读)
    • 还可以接受第二个参数,表示当前元素的伪元素(比如 :before、:after、:first-line、:first-letter 等)

        1. var result = window.getComputedStyle(ele, ':before')["background"];
  • CSS 伪元素

通过 CSS 向 DOM 添加的元素

主要是通过 :before 和 :after 选择器生成,然后用 content 属性指定伪元素的内容

    1. // <div id="test">Test content</div>
    2.  
    3. #test:before {
    4. content: 'Before ';
    5. color: #FF0;
    6. }
    7.  
    8. var test = document.getElementById('#test');
    9.  
    10. // 节点元素的 style 对象无法读写伪元素的样式
    11. var result = window.getComputedStyle(test, ':before').content;
    12. var color = window.getComputedStyle(test, ':before').color;
  • StyleSheet 对象

代表网页的一张样式表,包括行内样式表,内部样式表,外部样式表

严格来说,不仅包括网页样式表,还包括 XML 文档的样式表

document.styleSheets 返回一个类似数组的对象,代表当前页面的所有 StyleSheet 实例(即所有样式表)

    • 如果是 <style> 元素 的内部样式表,还可以通过 style 元素节点 sheet 属性获取 StyleSheet 对象

        1. // <style id="myStyle">
        2.  
        3. // </style>
        4.  
        5. var myStyleSheet = document.getElementById('myStyle').sheet;
        6. myStyleSheet instanceof StyleSheet; // true
    • StyleSheet 的实例属性

        • StyleSheet.disabled

            • 表示该样式表是否处于禁用状态,为 true 时,目标样式不会生效
            • 注意,disabled 属性只能在 JavaScript 脚本中设置,不能在 HTML 语句中设置
        • Stylesheet.href

            • 返回样式表的网址。
            • 对于内嵌样式表,该属性返回 null
            • 属性只读
                1. document.styleSheets[0].href
        • StyleSheet.media

            • 返回一个类似数组的对象(MediaList实例),成员是表示适用媒介的字符串。
            • 表示当前样式表是用于屏幕(screen),还是用于打印(print)或手持设备(handheld),或各种媒介都适用(all)
            • 该属性只读,默认值是 screen
            • MediaList.appendMedium(),用于增加媒介
            • MediaList.deleteMedium(),用于删除媒介
        • StyleSheet.cssRules

          • 指向一个类似数组的对象(CSSRuleList实例),里面每一个成员就是当前样式表的一条 CSS 规则
  • 实例方法

    • CSSStyleSheet.insertRule()

        • 用于在当前样式表的插入一个新的 CSS 规则
        • 第一个参数是表示 CSS 规则的字符串,这里只能有一条规则,否则会报错。
        • 第二个参数是该规则在样式表的插入位置(从0开始),该参数可选,默认为0(即默认插在样式表的头部)。
          • 注意,如果插入位置大于现有规则的数目,会报错

            1. var sheet = document.querySelector('#styleElement').sheet;
            2. sheet.insertRule('#block { color: white }', 0);
            3. sheet.insertRule('p { color: red }', 1);

            浏览器对脚本在样式表里面插入规则有很多限制。所以,这个方法最好放在 try...catch 里使用

  • CSSRule 实例的属性

    • CSSRule.cssText
    • CSSRule.parentStyleSheet
    • CSSRule.parentRule
    • CSSRule.type    表示当前样式规则的类型
        • 1        普通样式规则(CSSStyleRule 实例)
        • 3        @import规则
            • media 属性        返回代表@media规则的一个对象
            • conditionText 属性        返回@media规则的生效条件
                1. // HTML 代码如下
                2. // <style id="myStyle">
                3. // @media screen and (min-width: 900px) {
                4. // article { display: flex; }
                5. // }
                6. // </style>
                7. var styleSheet = document.getElementById('myStyle').sheet;
                8. styleSheet.cssRules[0] instanceof CSSMediaRule
                9. // true
                10.  
                11. styleSheet.cssRules[0].media
                12. // {
                13. // 0: "screen and (min-width: 900px)",
                14. // appendMedium: function,
                15. // deleteMedium: function,
                16. // item: function,
                17. // length: 1,
                18. // mediaText: "screen and (min-width: 900px)"
                19. // }
                20.  
                21. styleSheet.cssRules[0].conditionText
                22. // "screen and (min-width: 900px)"
        • 4        @media规则(CSSMediaRule 实例)
        • 5        @font-face规则
  • window.matchMedia()

    • 创建 MediaQueryList 对象来存放媒体查询的结果
    • 用来将 CSS 的 MediaQuery 条件语句,转换成一个 MediaQueryList 实例
      • 设置一个查询列表用来判定设备屏幕处于横屏还是竖屏

          1. var mql = window.matchMedia("(orientation: portrait)");
    • mql.media
      • 属性返回一个字符串,表示对应的 MediaQuery 条件语句

          1. var mql = window.matchMedia('(min-width: 400px)');
          2. mql.media // "(min-width: 400px)"
    • mql.matches

      • 返回一个布尔值,表示当前页面是否符合指定的 MediaQuery 条件语句
      • 通过检查相应查询的 matches 属性来获取查询结果,上述属性会直接返回查询结果
      • 下面的例子根据 mediaQuery 是否匹配当前环境,加载相应的 CSS 样式表
          1. var result = window.matchMedia("(max-width: 700px)");
          2.  
          3. if (result.matches){
          4. var linkElm = document.createElement('link');
          5. linkElm.setAttribute('rel', 'stylesheet');
          6. linkElm.setAttribute('type', 'text/css');
          7. linkElm.setAttribute('href', 'small.css');
          8.  
          9. document.head.appendChild(linkElm);
          10. }
    • mql.onchange
      • 如果 mql 条件语句的适配环境发生变化,会触发 change 事件

          1. var mql = window.matchMedia('(max-width: 600px)');
          2.  
          3. mql.onchange = function(e) {
          4. if (e.matches) {
          5. /* 视口不超过 600 像素 */
          6. } else {
          7. /* 视口超过 600 像素 */
          8. }
          9. }
        • 上面代码中,change事件发生后,存在两种可能。

          • 一种是显示宽度从700像素以上变为以下

          • 另一种是从700像素以下变为以上,

        • 所以在监听函数内部要判断一下当前是哪一种情况

  • MediaQueryList 接口的实例方法

    • MediaQueryList.addListener()
    • MediaQueryList.removeListener()
        1. var mql = window.matchMedia('(max-width: 600px)');
        2.  
        3. // 指定监听函数
        4. mql.addListener(mqCallback);

        5. // 撤销监听函数
        6. mql.removeListener(mqCallback);
        7. function mqCallback(e) {
        8. if (e.matches) {
        9. /* 视口不超过 600 像素 */
        10. } else {
        11. /* 视口超过 600 像素 */
        12. }
        13. }

(90)Wangdao.com第二十三天_JavaScript CSS 操作的更多相关文章

  1. (75)Wangdao.com第十三天_JavaScript 包装对象

    包装对象 所谓“包装对象”,就是分别与数值.字符串.布尔值相对应的Number.String.Boolean三个原生对象 这三个原生对象可以把原始类型的值变成(包装成)对象 var v1 = new ...

  2. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第二十三章:角色动画

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第二十三章:角色动画 学习目标 熟悉蒙皮动画的术语: 学习网格层级变换 ...

  3. 《Linux命令行与shell脚本编程大全》 第二十三章 学习笔记

    第二十三章:使用数据库 MySQL数据库 MySQL客户端界面 mysql命令行参数 参数 描述 -A 禁用自动重新生成哈希表 -b 禁用 出错后的beep声 -B 不使用历史文件 -C 压缩客户端和 ...

  4. NeHe OpenGL教程 第二十三课:球面映射

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  5. javaSE第二十三天

    第二十三天    338 1.进程和线程的概述    338 2.多线程(理解)    339 (1)多线程:一个应用程序有多条执行路径    339 (2)Java程序的运行原理及JVM的启动是多线 ...

  6. Python开发【第二十三篇】:持续更新中...

    Python开发[第二十三篇]:持续更新中...

  7. Gradle 1.12用户指南翻译——第二十三章. Java 插件

    其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Github上的地址: https://g ...

  8. “全栈2019”Java多线程第二十三章:活锁(Livelock)详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...

  9. “全栈2019”Java第二十三章:流程控制语句中决策语句switch上篇

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

随机推荐

  1. Spark Java API 计算 Levenshtein 距离

    Spark Java API 计算 Levenshtein 距离 在上一篇文章中,完成了Spark开发环境的搭建,最终的目标是对用户昵称信息做聚类分析,找出违规的昵称.聚类分析需要一个距离,用来衡量两 ...

  2. [物理学与PDEs]第2章习题3 Laplace 方程的 Neumann 问题

    设 $\Omega$ 为单连通区域, 在其边界 $\vGa$ 上给定向量场 ${\bf u}_B$, 则在 $\bar\Omega$ 中存在速度场 ${\bf u}$, 使其在 $\Omega$ 中成 ...

  3. UE4 AR开发笔记

    1.基础使用 ArToolKit:生成图片特征,可以用彩图.(图片先灰化)    genTexData效准相机.由于有的相机照相有弧度.  calib_camera 2.使用UE4ARPlugins做 ...

  4. 【原创】大叔问题定位分享(21)spark执行insert overwrite非常慢,比hive还要慢

    最近把一些sql执行从hive改到spark,发现执行更慢,sql主要是一些insert overwrite操作,从执行计划看到,用到InsertIntoHiveTable spark-sql> ...

  5. windows下安装setuptools与pip

    1.下载 setuptools与pip 下载地址如下: https://pypi.Python.org/pypi/setuptools https://pypi.Python.org/pypi/pip ...

  6. Linux 出现telnet: 127.0.0.1: Connection refused错误解决办法

    Linux 出现telnet: connect to address 127.0.0.1: Connection refused错误解决办法 没有xinetd服务: 1./etc/init.d目录中放 ...

  7. 移动端遮罩及阻止页面滑动,实用!!! 我们经常做一个fixed定位的遮罩和一个提示弹框,这时就要用到。记录--

    document.body.style.height = '100%'; document.body.style.overflow = 'hidden'; document.getElementByI ...

  8. python第六篇文件处理类型

    阅读目录 一 文件操作 二 打开文件的模式 三 操作文件的方法 四 文件内光标移动 五 文件的修改   文件处理                                             ...

  9. RabbitMQ的Java API编程

    1.创建Maven工程,pom.xml引入依赖: <dependency> <groupId>com.rabbitmq</groupId> <artifact ...

  10. SpringBoot 集成数据库连接池Druid

    1.pom.xml依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>druid< ...