css:通过html给css传递颜色属性值

简介: css:通过html给css传递颜色属性值

使用了三种方式

  • attr 可以用于content: attr(),本次传递颜色值没有成功
  • currentColor获取可以当前颜色值
  • var(--color) 可以获取当前作用域内的变量值

效果如下

image.png

完整代码

<style>
      .box-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
      }
      .box {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        border: 1px solid #dddddd;
      }
      .box-1 {
        background-color: attr(data-color);
      }
      .box-2 {
        background-color: currentColor;
      }
      .box-3 {
        background-color: var(--color);
      }
    </style>
    <div class="box-wrapper">
      <div class="box box-1" data-color="red">attr</div>
      <div class="box box-2" style="color: green">currentColor</div>
      <div class="box box-3" style="--color: red">var</div>
    </div>

参考

CSS - 使用数据属性添加颜色 - attr(数据颜色)

相关文章
|
16天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧,包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录,便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码,帮助读者更好地理解和应用这些知识点。
40 1
[HTML、CSS]细节与使用经验
|
17天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签(如video、input、canvas)、datalist和details标签的使用方法,以及CSS布局技巧(如margin、overflow: hidden和动态height)。文章旨在分享作者的学习经验和实用技巧。
30 1
[HTML、CSS]知识点
|
12天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
|
9天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
48 1
|
14天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
26 3
|
16天前
HTML 颜色值2
本列表展示了按十六进制(Hex)颜色值排序的常见颜色,包括黑色、蓝色、绿色、红色等,共 140 种颜色,方便快速查找和使用。
|
16天前
HTML 颜色4
Web安全色是指在早期计算机时代为了确保颜色在不同设备上的一致性而推荐使用的216种特定颜色。这些颜色能在256色模式下正确显示,避免因操作系统保留的颜色导致的显示问题。尽管现代计算机已能处理数百万种颜色,但了解这216种颜色仍有一定价值。
|
16天前
HTML 颜色值1
HTML颜色值由红、绿、蓝三色组成,使用十六进制表示。每个颜色分量范围从00到FF,颜色值以#开头,可采用3位或6位表示法。例如,黑色为#000或#000000,红色为#F00或#FF0000。
|
17天前
HTML 颜色13
灰暗色调展示了从纯黑到纯白的渐变色,共33种颜色。每种颜色以16进制和RGB格式表示,适用于网页设计、UI设计等领域。

热门文章

最新文章