對于css為 {padding:10% 10px 20% 10px;} 的 div，我需要能夠通過 JavaScript 檢索設定的填充，但是 window.getComputedStyle(myelement).getPropertyValue('padding'); 回傳不同的結果。
火狐=“10% 10px 20% 10px”
鉻 = “59.8839像素10 像素119.768像素2像素”
有沒有其他方法可以檢索此資訊，以便獲取 % 值而不是元素當前狀態 px 值？
http://jsfiddle.net/o1jhbn9f/1/
var div = document.getElementsByTagName('div')[0];
console.log(window.getComputedStyle(div).getPropertyValue('padding'));
uj5u.com熱心網友回復：
嗨朋友也許這個例子可以幫助你。在恢復我測驗的函式時，獲取 topBottom 和 leftRight 屬性樣式，并使用 split 來獲取每一側并以正確的方式連接。我希望你可以使用它。
function getPaddingCSS(selector) {
const elementoApp = window.getComputedStyle(document.querySelector(selector), null);
const elementPadding = {
topBottom: elementoApp.paddingBlock,
topBottomList: elementoApp.paddingBlock.split(' '),
leftRight: elementoApp.paddingInline,
leftRightList: elementoApp.paddingInline.split(' ')
}
const paddingStr = `${elementPadding.topBottomList[0]} ${elementPadding.leftRightList[1]} ${elementPadding.topBottomList[1]} ${elementPadding.leftRightList[0]}`;
return paddingStr;
}
const selector = 'navbar';
const paddingCSS = getPaddingCSS(selector)
console.log('paddingStr of ' selector.toUpperCase() ':', paddingCSS).navbar{
padding: 3% 15px 30% 60px;
}<navbar class="navbar">
</navbar>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/425416.html
標籤：javascript jQuery css