css - 没有值的自定义 css 属性

问题描述

我想构建一个禁用元素的自定义 css 属性（而不是使用disabled关键字）

所以，我写了下面的，但它没有用

<style>
.admin {
    color: green;
    enable: 
}

.user {
    color: red;
    --btn-disable: 0;
}

@property --btn-disable
    {
        syntax: '<number>';
        cursor: not-allowed;
        pointer-events: none;

        /*Button disabled - CSS color class*/
        color: #c0c0c0;
        background-color: rgb(229, 229, 229) !important;

    }

.btn-disabled
    {
        cursor: not-allowed;
        pointer-events: none;

        /*Button disabled - CSS color class*/
        color: #c0c0c0;
        background-color: rgb(229, 229, 229) !important;

    }
</style>
<h1>{{.PageTitle}}</h1>
<ul>
    {{range .Todos}}
            <input class={{.Classes}}>{{.Title}}</li>
    {{end}}
</ul>

上面的模板将给出如下内容：

<html><head><style>
.admin {
    color: green;
    enable: 
}

.user {
    color: red;
    --btn-disable: 0;
}

@property --btn-disable
    {
        syntax: '<number>';
        cursor: not-allowed;
        pointer-events: none;

         
        color: #c0c0c0;
        background-color: rgb(229, 229, 229) !important;

    }

.btn-disabled
    {
        cursor: not-allowed;
        pointer-events: none;

         
        color: #c0c0c0;
        background-color: rgb(229, 229, 229) !important;

    }
</style>
</head><body><h1>My TODO list</h1>
<ul>
    
            <input class="admin btn-disabled">Task 1
    
            <input class="user">Task 2
    
            <input class="admin user">Task 3
    
</ul>
</body></html>

第一个输入的样式使用.btn-disabled它工作正常，第二个输入的样式使用--btn-disabled它不能正常工作。最后一个元素同时使用两种方式设置样式，但效果不佳，很可能--btn-disabled是最后一个实现的样式。

任何想法？

标签： css

我能够使用解决它[data-any="xxx"]，如下所示：

<html><head><style>
[data-authorized="no"] {  
   
        cursor: not-allowed;
        pointer-events: none;
         
        color: #c0c0c0;
        background-color: rgb(229, 229, 229) !important;
}
</style>
</head><body><h1>My TODO list</h1>
<ul>
    
            <input type="text" data-authorized="yes">Task 1
    
            <input type="text" data-permissions="user" data-authorized="no">Task 2
    
            <input type="text" data-authorized="yes">Task 3
    
</ul>

<script>
  var flags = ["admin", "super user"]
  var elements = document.querySelectorAll("input");
  elements.forEach((element, index, array) => { 
        if(element.hasAttribute("data-permissions")){
            console.log(element.dataset.permissions)
            var perm = element.dataset.permissions.split(" ");
                    var found = false;
                    for (var i = 0; i < perm.length; i++) {
                        if (flags.indexOf(perm[i]) > -1) {
                            element.dataset.authorized = "yes"
                            element.removeAttribute("data-permissions")
                            break;
                        }
                    } 
        }
  });
</script>
</body></html>

考虑到对这个问题的宝贵意见，我必须避免在客户端使用它，现在开始寻找如何在服务器端使用它。

css - 没有值的自定义 css 属性

问题描述

解决方案

推荐阅读