我(我可以)使用 attr() 来获取 z-index，一个 CSS 属性，以便在我的样式定义中与 calc() 一起使

我正在尝试使用 CSScalc()和attr()方法设置页面上特定div 元素id="test"相对于其 z-index 的位置，这样当 z-index 发生变化时，位置会按比例变化。

但是，它似乎在所有情况下都将attr(zIndex)评估为 1 的值，导致所需的元素保持原位，尽管 zIndex 的值已修改。有没有一种正确的方法可以从样式定义本身中访问CSS值，或者我必须在JavaScript中完成所有这些操作？

<!DOCTYPE html>
<html>
<head>
<title>zLinkTestPage</title>
<style>
body { background-color: #000000; }
div { margin: 0px; padding: 0px; border-width: 0px; display: block; }
#test {
position: absolute;
top: 0px;
left: calc( attr(zIndex) * 10px );/*This line is the one in question*/
background-color: #ff0000;
z-index: 0;
width: 144px; height: 288px;
}
#ref {
position: absolute;
top: 0px;
left: 0px;
background-color: #00ff00;
z-index: 1;
width: 288px; height: 144px;
}
</style>
</head>
<body>
<div id="ref">Reference div</div>
<div id="test" onmouseenter="moveZ(2);" onmouseleave="moveZ(-2);"><br /><br /><br /><br /><br /><br /><br /><br />Test div</div>
</body>
<script type="text/javascript">
function moveZ(amount) {
var box = document.getElementById("test");
var curZ = box.style.zIndex;
if(curZ == "") {
//console.log((typeof curZ) + " curZ=" + curZ);
curZ = 0; //because, for some reason, the initial value of any CSS property when accessed by JavaScript always seems to be null of some sort...
//console.log((typeof curZ) + " curZ=" + curZ);
}
else {
//console.log((typeof curZ) + " curZ=" + curZ);
curZ = parseInt(curZ);
//console.log((typeof curZ) + " curZ=" + curZ);
}
var newZ = curZ + amount;
box.style.zIndex = newZ;
}
</script>
</html>

这是对我自己的练习，以后只会用来制作更酷的东西。

据我所知，仅使用 CSS 是不可能的。但是，您可以在 CSS 属性content中引用元素上的 HTML 属性，并在 CSS 选择器中引用 HTML 属性。

因此，使用您的代码，您实际上可以在元素上创建一个zIndex(不是 CSSz-index)属性属性(或者我创建了一个data-zIndex)，然后在content属性中引用该属性

#test:after {
content: attr(data-zIndex);
background: white;
color: black;
padding: 1em;
display: inline-block;
}

或者，您可以使用 CSS 选择器根据该属性的值来定位元素，例如...

#test[data-zIndex="0"]:after {
border-radius: 1em;
}
#test[data-zIndex="2"]:after {
background: yellow;
}

下面是包含这些更改的演示。

function moveZ(amount) {
var box = document.getElementById("test");
var curZ = box.getAttribute('data-zIndex');
if (curZ == "") {
//console.log((typeof curZ) + " curZ=" + curZ);
curZ = 0; //because, for some reason, the initial value of any CSS property when accessed by JavaScript always seems to be null of some sort...
//console.log((typeof curZ) + " curZ=" + curZ);
} else {
//console.log((typeof curZ) + " curZ=" + curZ);
curZ = parseInt(curZ);
//console.log((typeof curZ) + " curZ=" + curZ);
}
var newZ = curZ + amount;
box.setAttribute('data-zIndex',newZ);
}

body {
background-color: #000000;
}
div {
margin: 0px;
padding: 0px;
border-width: 0px;
display: block;
}
#test {
position: absolute;
top: 0px;
left: calc( attr(zIndex) * 10px);
/*This line is the one in question*/
background-color: #ff0000;
z-index: 0;
width: 144px;
height: 288px;
}
#test:after {
content: attr(data-zIndex);
background: white;
color: black;
padding: 1em;
display: inline-block;
}
#test[data-zIndex="0"]:after {
border-radius: 1em;
}
#test[data-zIndex="2"]:after {
background: yellow;
}
#ref {
position: absolute;
top: 0px;
left: 0px;
background-color: #00ff00;
z-index: 1;
width: 288px;
height: 144px;
}

<div id="ref">Reference div</div>
<div id="test" data-zIndex='0' onmouseenter="moveZ(2);" onmouseleave="moveZ(-2);"><br /><br /><br /><br /><br /><br /><br /><br />Test div</div>

相关内容

最新更新

热门标签：