代码之家 › 专栏 › 技术社区 › Hasan A Yousef Michael Benjamin

没有值的自定义css属性

css

Hasan A Yousef Michael Benjamin · 技术社区 · 3 年前

我想构建一个自定义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已禁用 是最后实现的样式。

有什么想法吗?

0 回复 | 直到 3 年前

Hasan A Yousef Michael Benjamin 3 年前

我能够使用解决它 [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>

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