[英]Using a JavaScript variable in a CSS transform
剛開始使用JS,所以這可能是一個新手問題。 我試圖弄清楚在JS中使用以下代碼行時如何使用JS變量:
But3.style.webkitTransform = "translateX(JSVARIABLE)";
在我的JS文件中,當按鈕懸停在上方時,我正在運行一個函數:
HTML
<html>
<div id= "But3" class="Button3"> </div>
</html>
當該按鈕懸停(鼠標懸停)時,該函數在我的JS代碼中運行:
JS
But3.onmouseover = function(){
var h = document.getElementById("But3").clientHeight;
var w = document.getElementById("But3").clientWidth;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
/* This may be completely wrong*/
var x = String(nh);
var y = String (nw)
/* This may also be completely wrong*/
var nhf = x + "px";
var nwf = y + "px";
/* This works but I need it to work with nhf */
But3.style.webkitTransform = "translateX(10px)";
}
如何使它可以將值nhf
和nwf
用作我的translateX
轉換的值?
請注意,由於將值轉換為字符串以便包含“ px”,因此我可能不正確設置值的格式。
如果需要,這是我的CSS :
.Button3{
height: 20%;
width: 17%;
left: 30%;
top: 20%;
border-radius: 20%;
background: #8585ad;
margin: auto;
position: relative;
cursor: pointer;
transition: 2s;
}
您可以將變量連接為值:
But3.style.webkitTransform = "translateX(" + nhf + ")";
正如jerrylow所說,將變量連接到字符串中。 這使多余的代碼變得不必要了
document.getElementById("But3").onmouseover = function(){ var h = document.getElementById("But3").clientHeight; var w = document.getElementById("But3").clientWidth; var nh = Math.floor(Math.random() * h); var nw = Math.floor(Math.random() * w); // translateX should probably use nw instead of nh But3.style.webkitTransform = "translateX(" + nh + "px)"; }
<input type="button" value="Hover me" id="But3">
您可以在模板文字中使用字符串插值來完成此操作: https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals 。
在您的情況下,它看起來像:
But3.style.webkitTransform = `translateX(${nhf})`;
模板文字是ES2015規范中引入的,並且受到大多數主流瀏覽器的支持 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.