スタイル定義でcalc（）で使用するCSSプロパティであるz-インデックスを取得するには、どうやってattr（）を使用できますか？

CSS calc()とattr()メソッドを使用して、特定のdiv要素id="test"の位置をz-indexを基準にしてページ上に設定しようとしています。その結果、z-indexが変化すると位置は比例して変化します。スタイル定義でcalc（）で使用するCSSプロパティであるz-インデックスを取得するには、どうやってattr（）を使用できますか？

しかし、すべての場合に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>

これは自分のための運動であり、唯一の後に多くのクーラーのものを作るために使用されます。

出典

2017-03-15 GameGibu

私の知る限り、これはCSSだけでは不可能です。ただし、CSSプロパティcontentの要素のHTML属性とCSSセレクタの参照HTML属性を参照できます。だからあなたのコードを使用して

、あなたが実際にzIndex（ないCSS z-index）を作成することができ、そのcontent属性で

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

またはすることができます参照し、その後、要素の属性（または私はdata-zIndexを作成した）属性

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

#test[data-zIndex="2"]:after { 
    background: yellow; 
}

に

...のように、その属性の値を基にした要素をターゲットにするCSSセレクタを使うには、ここではそれらの変更とデモです。

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>

出典

2017-03-15 17:01:19

だから、一人でCSSは、必ずしもその変数間の具体的な、スケーラブルな関係を含めることはできません。私は、JavaScriptの実装をこれらのすべてを超えて続けていく必要があると思います。あなたの答えをありがとう。 – GameGibu

スタイル定義でcalc（）で使用するCSSプロパティであるz-インデックスを取得するには、どうやってattr（）を使用できますか？

答えて

関連する問題