<sup id="sjju3"><noscript id="sjju3"></noscript></sup>
    <big id="sjju3"></big>

  • <blockquote id="sjju3"></blockquote>
    <blockquote id="sjju3"></blockquote>

      <td id="sjju3"></td>

      <big id="sjju3"></big>
        <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>
      1. 通过CSS变量修改样式的方法示例

          发布时间:2019-02-15 16:05:01   作者:Mr_F   我要评论

        这篇文章主要介绍了通过CSS变量修改样式的方法示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

        问题

        js怎么去修改css伪类样式呢?但是js并没有伪类选择器,那么该怎么办呢?网上有不少方法,比如通过切换元素的类、在style中动态插入新的样式等。

        那么这里再来一种方法,设置css变量(var),通过js去改变这个变量来实现。

        示例:改变div的hover背?#21543;?/p>

        <!-- css -->
        <style type="text/css">
            :root {
                --divHoverColor: red;
            }
            div {
                width: 100px;
                height: 100px;
                background: bisque;
            }
            div:hover {
                background: var(--divHoverColor);
            }
        </style>
        <!-- html -->
        <div onClick="onDivClick('green')"/>
        <!-- js -->
        <script type="text/javascript">
            function onDivClick(value){
                document.documentElement.style.setProperty('--divHoverColor', value);
            }
        </script>
        
        

        那么,来认识下css variable吧

        1. 基本用法

        局部变量

        div {
            --masterColor: red;
            background: var(--masterColor);
        }
        
        

        全局变量

        /* 对于HTML来说,:root 表示 <html> 元素 */
        :root {
            --masterColor: red;
        }
        div {
            background: var(--masterColor);
        }
        
        

        2. 语法

        var( <custom-property-name> [, <declaration-value> ]? )

        <custom-property-name> : 自定义属性名

        <declaration-value> : 声明值(fallback value)

        示例:

        div {
            /*
            --masterColor未定义,所以背?#21543;?#20351;用red 
            它可以通过逗号分隔,定义多个声明值,var(--masterColor, red, green)
            */
            background: var(--masterColor, red);
        }
        

        变量可以通过var()进行引用

        示例:

        div {
            --masterColor: red;
            --bgColor: var(--masterColor)
        }
        

        注意:属性名是不能使用变量的

        错误示例:

        div {
            --bg: background;
            var(--bg): red;
        }
        

        3. 浏览器支持

        Can I use 

        使用@support检测

        @supports ( (--masterColor: red)) {
          /* supported */
        }
        @supports ( not (--masterColor: red)) {
          /* not supported */
        }
        

        使用JS检测

        const isSupported = window.CSS && window.CSS.supports 
            && window.CSS.supports('--masterColor', 'red');
        
        if (isSupported) {
          /* supported */
        } else {
          /* not supported */
        }

        参考

        MDN
        CSS Variable 规范

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

        相关文章

        • 使用智能 CSS 基于用户滚动位置应用样式

          这篇文章主要介绍了使用智能 CSS 基于用户滚动位置应用样式的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
          2019-02-18
        • 通过CSS变量修改样式的方法示例

          这篇文章主要介绍了通过CSS变量修改样式的方法示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
          2019-02-15
        • 如?#38382;?#29992;css绘制钻石的方法

          这篇文章主要介绍了如?#38382;?#29992;css绘制钻石的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习
          2019-02-15
        • css的content属性的具体使用

          这篇文章主要介绍了css的content属性的具体使用,用于呈现伪元素的内容。平时content属性值我们用的最多的就是给个纯字符,其实它还有很多值可供选择。?#34892;?#36259;的可以了解一
          2019-02-14
        • css加载会造成阻塞吗

          可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?下面就跟随小编一起来了解一下
          2019-02-13
        • css隐藏移动端滚动条并且ios上平滑滚动的方法

          这篇文章主要介绍了css隐藏移动端滚动条并且ios上平滑滚动的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
          2019-01-23
        • css多种方式实现等宽布局的示例代码

          本文讲的等宽布局是在不手动设置元素宽度的情况下,使用纯css实现各个元素宽度都相当的效果。具有一定的参考价值,?#34892;?#36259;的小伙伴们可以参?#23478;?#19979;
          2019-01-22
        • 纯CSS实现表单验证的示例代码

          这篇文章主要介绍了纯CSS实现表单验证的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
          2019-01-21
        • 详解利用clear清除浮动的一些问题解决

          这篇文章主要介绍了详解利用clear清除浮动的一些问题解决的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
          2019-01-18
        • 聊一聊CSS中的长度单位的使用

          CSS中有很多属性可以接受长度值,比如: width, height, margin, padding, border-width, font-size, text-shadow。因为使用场景多,因此CSS也提供了许多长度单位,本文就
          2019-01-16

        最新评论

        2018白小姐一肖中特马
        <sup id="sjju3"><noscript id="sjju3"></noscript></sup>
        <big id="sjju3"></big>

      2. <blockquote id="sjju3"></blockquote>
        <blockquote id="sjju3"></blockquote>

          <td id="sjju3"></td>

          <big id="sjju3"></big>
            <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>
          1. <sup id="sjju3"><noscript id="sjju3"></noscript></sup>
            <big id="sjju3"></big>

          2. <blockquote id="sjju3"></blockquote>
            <blockquote id="sjju3"></blockquote>

              <td id="sjju3"></td>

              <big id="sjju3"></big>
                <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>