css如何读取并且使用html中的data-属性?

Sweenny_Nv
  • 71

我想做一个鼠标悬浮的下拉列表,悬浮的容器做一个三角形,三角形的left需要动态的读取容器的大小设置,所以打算通过HTML的data-属性,然后让css读取并且使用这个属性。

现在的问题是,伪元素中content属性可以读取并且使用这个属性,但是left却无法使用这个
属性。

&-content {
        position: relative;

        &::before {
            --left: attr(data-left); // 只能设置content,不能设置left
            // --left: 43px;   // 使用这个变量可以设置left,
            position: absolute;
            content: attr(data-left); // 读取并显示值43px
            // left: 43px; 
            left: var(--left); // 如果是通过attr取data-left的值是无效的css属性    
            // background: #f5f5f5;
            background: #f00;
            width: 8.5px;
            height: 8.5px;
            transform-origin: center;
            transform: rotate(45deg) translateY(-60%);
        }
    }
回复
阅读 467
4 个回答

给你出个馊主意

const style = document.createElement("style")
style.innerHTML = ".c { background-color: red; width: 100px; height: 100px;position: absolute; top: 0;left:0; }"
document.body.appendChild(style)
<div data-name="aa">内容</div>

css:

div[data-name="aa"]{}

jq获取自定义属性值:

$('div').data('name')

或者

$('div').attr('data-name')

是要居中吗,居中一般通过下面的 css 设置,效果比较好。

div {
    position:relative;
}
.drop {
   position: absolute;
   left: 50%;
   transform: translateX(-50%)
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏