使用jquery，我如何找到屬性百分比的像素值並將其添加到不同的屬性？

我是jquery的新手，我遇到了一些麻煩。使用jquery，我如何找到屬性百分比的像素值並將其添加到不同的屬性？

.pageimage { 
    width:80%; 
    height:60%; 
    margin:0 auto; 
    background:#0FF; 
    position:absolute; 
    left:; 
    top:20%; 
}

使用jQuery，我試圖找到「頂」的像素值，從該值減去50%，然後放置在「左」的屬性，值。

此外，沒有人知道如何在瀏覽器窗口重新調整大小後重新運行此腳本？

非常感謝幫助。

來源

2017-06-28 BEE EEE

什麼做的INT-價值你的意思是「從該值減去50％」？是「top/2」還是「calc（top-50％）」？ –

如果您發現任何提交的答案有用，請記住點擊旁邊的勾號即可接受答案。這將有助於向未來的訪問者提供最佳/最有用的解決方案。祝你今天愉快！ –

您可以輕鬆地做到這一點，創造性地使用.css()方法。如果獲得元素的.css("top")，則返回px，因此您必須replace("px","")才能夠使用數值，然後除以2，然後再在末尾添加"px"。

將其封裝在一個函數中，並在頁面加載時調用它。然後添加一個$window.resize()處理程序，以便在加載窗口後每次調整窗口大小時運行該函數。

這裏有一個完整的例子：

function updatePageImageLeft() { 
 
    var calculatedLeft = $(".pageimage").css("top").replace("px", "")/2 + "px"; 
 
    // console.log(calculatedLeft); 
 
    $(".pageimage").css("left", calculatedLeft); 
 
} 
 

 
// Called when the page loads 
 
updatePageImageLeft(); 
 

 
// Page has been resized, call it again 
 
$(window).resize(function() { 
 
    updatePageImageLeft(); 
 
});

.pageimage { 
 
    width: 80%; 
 
    height: 60%; 
 
    margin: 0 auto; 
 
    background: #0FF; 
 
    position: absolute; 
 
    /*left: ;*/ 
 
    top: 20%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="pageimage"></div>

注：您可能還需要尋找到CSS calc() function，因爲它可以幫助你避免先寫任何JavaScript/jQuery代碼（尤其是將它與CSS自定義屬性結合使用時）。

來源

2017-06-28 10:47:36

要獲得「top」的值，您可以使用函數css。

var top = $(".pageimage").css("top"); 
$(".pageimage").css("left",parseInt(top)* 0.5);

重新運行該腳本的窗口已經被調整使用後：

$(window).resize(function() { 
    //place Code here 
    }

Link to jsfiddle

編輯使用parseInt函數來獲取頂級

來源

2017-06-28 10:53:38 HummiBocha

使用jquery，我如何找到屬性百分比的像素值並將其添加到不同的屬性？

回答

相關問題